How to get input value from each input ordered by button using javascript?

Question

I want get userID value for each form separately using javascript api.

I tried :

     <form >
     <input  list="browsers" id="${childSnapshot.val().orderid}" >
     <datalist id="browsers">
       <option value="Order Pending">
       <option value="Order Confirmed">
       <option value="Order Shipped">
       <option value="Order Delivered">
     </datalist>
   </form>
   <input id="${childSnapshot.val().orderid}" value="${childSnapshot.val().userID}"
   <button id="${childSnapshot.val().orderid}"  onclick="reply_click(this.id)" style="padding:1px">Update</button>
       

function reply_click(clicked_id){
  let valueitem = document.getElementById(clicked_id).value;
  var orderid = clicked_id;
  console.log(orderid+valueitem)
}

The result i'm getting Order id and the option value, but userID its not coming how to fix it ?

Does this answer your question? [how to get values of each form javascript?](https://stackoverflow.com/questions/68663433/how-to-get-values-of-each-form-javascript) — Liam, Aug 05 '21 at 09:55

Ernesto Stifano · Accepted Answer · 2021-08-04T10:34:36.227

1

Try the following demonstrative snippet:

const button = document.getElementById('button');

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

button.addEventListener('click', onClickHandler);

<form>
  <input id="list" 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>

edited Aug 04 '21 at 10:34

answered Aug 04 '21 at 10:25

Ernesto Stifano

3,027
1
10
20

this work perfectly , but its only read the first order button and the remaining orders buttons no – Ali Alsaggaf Aug 04 '21 at 10:55
@AliAlsaggaf how are you generating your HTML? – Ernesto Stifano Aug 05 '21 at 09:00
@AliAlsaggaf please remember to mark your question as answered if it got a useful answer. – Ernesto Stifano Aug 14 '21 at 12:57

score 0 · Answer 2 · answered Aug 04 '21 at 10:16

0

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

You can't have two same id in html

Did you try this?

<button onclick="reply_click('${childSnapshot.val().orderid}')" style="padding:1px">Update</button>

answered Aug 04 '21 at 10:16

Natsu

150
11

i tried this i got the orderid but userid value no – Ali Alsaggaf Aug 04 '21 at 10:22
You must remove the id from top too in your first input "id="${childSnapshot.val().orderid}"" because you using 3 same id in your html code. And at end of the second input you missing "/>" to close the tag. – Natsu Aug 04 '21 at 10:27

How to get input value from each input ordered by button using javascript?

2 Answers2

Linked