how to get values of each form javascript?

Question

I'm getting only the first form value but the second form value not showing when I press the button

this my code what i tried:

      <form>
        <input id="${childSnapshot.val().userID}" list="browsers">
        
        <datalist id="browsers">
          <option value="Order Pending">
          <option value="Order Confirmed">
          <option value="Order Shipped">
          <option value="Order Delivered">
        </datalist>
        
        <input id="${childSnapshot.val().orderid}" value="${childSnapshot.val().userID}"></input>
      
        <button id="button" type="button" style="padding: 1px" data-order-id="${childSnapshot.val().orderid}">Update</button>
      </form>
      <form>
        <input id="${childSnapshot.val().userID}" list="browsers">
        
        <datalist id="browsers">
          <option value="Order Pending">
          <option value="Order Confirmed">
          <option value="Order Shipped">
          <option value="Order Delivered">
        </datalist>
        
        <input id="${childSnapshot.val().orderid}" value="${childSnapshot.val().userID}"></input>
      
        <button id="button" type="button" style="padding: 1px" data-order-id="${childSnapshot.val().orderid}">Update</button>
      </form>
      <script>
          const button = document.getElementById('button');

const onClickHandler = (e) => {
  const orderID = e.target.dataset.orderId;
  const userID = document.getElementById(orderID).value;
  const optionValue = document.getElementById(userID).value;

  
  console.log(userID + ' ' + orderID + ' ' + optionValue);
}

button.addEventListener('click', onClickHandler);
      </script>

How to get all forms values when I click its own button?

Ids [still](https://stackoverflow.com/questions/68649408/how-to-get-input-value-from-each-input-ordered-by-button-using-javascript) have to be **unique** — Andreas, Aug 05 '21 at 08:59
Does this answer your question? [GetElementByID - Multiple IDs](https://stackoverflow.com/questions/14408891/getelementbyid-multiple-ids) — Liam, Aug 05 '21 at 09:54
@Andreas both ids its unique the code working fine but its reading only the first form as im using api there are multiple forms — Ali Alsaggaf, Aug 05 '21 at 09:55
Which is irrelevant. Have the same id multiple times in a page invalidates the HTML (full stop) — Liam, Aug 05 '21 at 09:56
@Liam all ids is unique from the json file example form1 id="zaq11" , form2 id="zaq12" — Ali Alsaggaf, Aug 05 '21 at 10:02
_"...example form1 id="zaq11" , form2 id="zaq12""_ - If that's actually the case then the [mcve] is missing important stuff. But then also the script should work as expected. But the described behavior tells another story, namely that the forms have the same id. — Andreas, Aug 05 '21 at 10:17

score 0 · Answer 1 · answered Aug 05 '21 at 09:13

Lets use unique ids for inputs for each forms. Something like below demonstrative code snippet:

<form>
    <input id="form1 + ${childSnapshot.val().userID}" list="browsers">

    <datalist id="browsers">
        <option value="Order Pending">
        <option value="Order Confirmed">
        <option value="Order Shipped">
        <option value="Order Delivered">
    </datalist>

    <input id="form1 + ${childSnapshot.val().orderid}" value="${childSnapshot.val().userID}">
    </input>

    <button id="button" type="button" style="padding: 1px"
        data-order-id="form1 + ${childSnapshot.val().orderid}">Update</button>
</form>
<form>
    <input id="form2 + ${childSnapshot.val().userID}" list="browsers">

    <datalist id="browsers">
        <option value="Order Pending">
        <option value="Order Confirmed">
        <option value="Order Shipped">
        <option value="Order Delivered">
    </datalist>

    <input id="form2 + ${childSnapshot.val().orderid}" value="${childSnapshot.val().userID}"></input>

    <button id="button" type="button" style="padding: 1px" data-order-id="form2 + ${childSnapshot.val().orderid}">Update</button>
</form>
<script>
    const button = document.getElementById('button');

    const onClickHandler = (e) => {
        const orderID = e.target.dataset.orderId;
        const userID = document.getElementById(orderID).value;
        const optionValue = document.getElementById(userID).value;
        console.log(userID + ' ' + orderID + ' ' + optionValue);
    }

    button.addEventListener('click', onClickHandler);
</script>

this code not working, and the form its create auto from the api i cant keep id for each new form — Ali Alsaggaf, Aug 05 '21 at 09:39

score 0 · Answer 2 · answered Aug 05 '21 at 10:48

that work the solution (:

window.onload = function(){
  ordersmain = document.getElementById("orders");
  var leadsRef = database.ref('items-ordered');
  leadsRef.on('value', function(snapshot) {
      snapshot.forEach(childSnapshot => {
           ordersmain.innerHTML +=`

           <form >
             <input  list="browsers" id="${childSnapshot.val().userid}" >
             <datalist id="browsers">
               <option value="Order Pending">
               <option value="Order Confirmed">
               <option value="Order Shipped">
               <option value="Order Delivered">
             </datalist>

           </form>
           <input id="1112${childSnapshot.val().userid}" value="${childSnapshot.val().userID}">
           <button  id="${childSnapshot.val().userid}" onclick="reply_click(this.id)" style="padding:1px">Update</button>

             </td>
           </tr>
 
      });
  });
)


function reply_click(clicked_id) {
  let userID = document.getElementById("1112"+''+clicked_id).value
  let optionvalue = document.getElementById(clicked_id).value;
  let id = clicked_id;
console.log("Oderid:"+id+"customerid"+userID+"optionvalue:"+optionvalue)
}

how to get values of each form javascript?

2 Answers2

Linked