The Cart page of my eCommerce website displays each cart item with a form which allows the user to update the cart item. Here is a screenshot:

r/webdev - How can I add an event listener to every single input field (for multiple forms) and make that listener target the submit button of the respective form?

By default, the “Update” button is hidden using visibility: hidden.

I want that when an input field’s value changes, the respective “Update” button (inside the same form) becomes visibility: visible.

Here is a very abstract example of what my HTML will look like once I have added further input fields.

<form>
  <input type="number" name="quantity">
  <input type="text" name="size">
  <input type="text" name="color">
  <button type="submit">Update</button>
</form>

<form>
  <input type="number" name="quantity">
  <input type="text" name="size">
  <input type="text" name="color">
  <button type="submit">Update</button>
</form>

<form>
  <input type="number" name="quantity">
  <input type="text" name="size">
  <input type="text" name="color">
  <button type="submit">Update</button>
</form>

How can I add an event listener to every single input field and make that listener target the correct button? I think a solution without ids would look cleaner, but I am open to any solution.



Source link

Write A Comment