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

qwerty12butt
May 29, 2023
282 views
3 votes
3 Answers

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>

Answers

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>

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers