时间戳

首页 > 解决方案 > 如何获取每个表单javascript的值？

javascript - 如何获取每个表单javascript的值？

问题描述

我只得到第一个表单值，但当我按下按钮时没有显示第二个表单值

这是我尝试过的代码：

      <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>

单击自己的按钮时如何获取所有表单值？

标签： javascripthtml

解决方案

让我们为每个表单的输入使用唯一的 id。类似于下面的演示代码片段：

<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>

推荐阅读