how to access a class within a form that has the same name as a class in another form

Question

I'm trying to create a data collection page with multiple forms that each use the same function to append an array. the problem is that I can't figure out how to access the data on the forms.

What I have so far:

Notice that the JavaScript code adds events to the buttons of each form and the productList();

function is supposed to extract the values from the hidden input controls.

document.addEventListener("DOMContentLoaded", () => {
  const product1 = document.querySelector("#productId_1")
  const product2 = document.querySelector("#productId_2")
  const product3 = document.querySelector("#productId_3")

  product1.addEventListener("submit", e => {
    e.preventDefault();
    var formId = "#productId_1";
    productList(formId);
  });

  product2.addEventListener("submit", e => {
    e.preventDefault();
    var formId = "#productId_2";
    productList(formId);
  });

  product3.addEventListener("submit", e => {
    e.preventDefault();
    var formId = "#productId_3";
    productList(formId);
  });
});


function productList(formId) {

  var a = document.getElementById(formId).getElementsByClassName("productId")[0];

  //testing
  alert(formId, a);
}

<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" id="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_1">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" id="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_2">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container" class="product" id="productId_3">
    <form action="" class="product">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_3">
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>

Answer 1

When creating forms it is often not necessary to use IDs. Use the name attribute instead -- both for the form and for all the form fields.

You already have event listeners for all the forms. I made a shorter version of that. You can also se a commented out line that you can get a specific form with the dot notation on the document.forms list.

When you use the addEventListener() method the parameter in the callback function is an event object (here the submit event). The event holds all the information about the event. For the submit event, what form was submitted etc. So, in the callback function (here productList(e)) the e.target is the form and with the dot notation you can get all the form fields that has a name, like e.target.productId.value to get the value from that input element.

document.addEventListener("DOMContentLoaded", e => {
  // for each form in the document
  [...document.forms].forEach(form => {
    form.addEventListener('submit', productList);
  });
  // a specific form
  //document.forms.productId_1.addEventListener('submit', productList);
});

function productList(e) {
  e.preventDefault();
  console.log(e.target.productId.value);
}

<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" name="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" name="productId" value="item_1">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" name="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" name="productId" value="item_2">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container" class="product">
    <form action="" class="product" name="productId_3">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" name="productId" value="item_3">
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>

Answer 2

you must remove # from parameter formId to works with document.getElementById

see live playground https://codepen.io/dimaslanjaka/pen/YzJMKJa

<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" id="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_1">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" id="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_2">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container" class="product" id="productId_3">
    <form action="" class="product">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_3">
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>
<script>
console.clear();

document.addEventListener("DOMContentLoaded", () => {
  const product1 = document.querySelector("#productId_1");
  const product2 = document.querySelector("#productId_2");
  const product3 = document.querySelector("#productId_3");

  product1.addEventListener("submit", function (e) {
    e.preventDefault();
    productList(this.id);
  });

  product2.addEventListener("submit", function (e) {
    e.preventDefault();
    productList(this.id);
  });

  product3.addEventListener("submit", function (e) {
    e.preventDefault();
    productList(this.id);
  });
});

function productList(formId) {
  const a = document.getElementById(formId);
  let hiddenInput;

  if (a) {
    hiddenInput = a.getElementsByClassName("productId")[0];
  }

  //testing
  alert(`hidden input of form #${formId} has value ${hiddenInput.value}`);
}
</script>

Answer 3

Here I assume you do not know all the id's and you may have more elements (forms) with that class at a later point in time.

function productList(formId) {
  const a = document.getElementById(formId).getElementsByClassName("productId")[0];
  //testing
  alert(formId, a);
}

function onSubmitHandler(event) {
  event.preventDefault();
  const formId = event.target.id;
  productList(formId);
}

document.addEventListener("DOMContentLoaded", () => {
  const forms = document.querySelectorAll('form');
  [...forms].forEach(form => form.addEventListener('submit', onSubmitHandler));
});

<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
    <form action="" class="product" id="productId_1">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_1">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container">
    <form action="" class="product" id="productId_2">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_2">
      <button class="submit">Purchase</button>
    </form>
  </div>

  <div class="container" class="product" id="productId_3">
    <form action="" class="product">
      <h1>balls</h1>
      <p>a ball bering</p>
      <input type="hidden" class="productId" value="item_3">
      <button class="submit">Purchase</button>
    </form>
  </div>
</div>

Answer 4

getElementById takes only the id value, not the # selector syntax. So this:

var formId = "#productId_1";

should be this:

var formId = "productId_1";

Additionally, you'll find that console.log produces more useful information than alert. So this:

alert(formId, a);

should be this:

console.log(formId, a);

With that, the code is working. formId is the id of the selected <form> and a is the hidden <input>. You can get its value with a.value.

For example:

document.addEventListener("DOMContentLoaded",() =>{
    const product1 = document.querySelector("#productId_1")
    const product2 = document.querySelector("#productId_2")
    const product3 = document.querySelector("#productId_3")

    product1.addEventListener("submit",e=>{
        e.preventDefault();
        var formId = "productId_1";
        productList(formId);
    });

    product2.addEventListener("submit",e=>{
        e.preventDefault();
        var formId = "productId_2";
        productList(formId);
    });

    product3.addEventListener("submit",e=>{
        e.preventDefault();
        var formId = "productId_3";
        productList(formId);
    });
});


function productList(formId){
    var a = document.getElementById(formId).getElementsByClassName("productId")[0];
    //testing
    console.log(formId, a.value);
}

<div class="productContainer">
  <h1 class="productTitle">Products:</h1>
  <div class="container">
      <form action="" class="product" id="productId_1">
          <h1>balls</h1>
          <p>a ball bering</p>
          <input type="hidden" class="productId" value="item_1">
          <button class="submit">Purchase</button>
      </form>
  </div>

  <div class="container">
      <form action="" class="product" id="productId_2">
          <h1>balls</h1>
          <p>a ball bering</p>
          <input type="hidden" class="productId" value="item_2">
          <button class="submit">Purchase</button>
      </form>
  </div>

  <div class="container" class="product" id="productId_3">
      <form action="" class="product">
          <h1>balls</h1>
          <p>a ball bering</p>
          <input type="hidden" class="productId" value="item_3">
          <button class="submit">Purchase</button>
      </form>
  </div>
</div>