javascript - Html javascript 提交不同的表单相同的数据类型，2 个按钮

Question

好吧，解释起来有点困惑，但基本上，我正在创建一个结账页面，用户可以选择“送货”或“取货”，一旦选择，它就会“取消隐藏”相应的表格，一旦填写完毕就会发送数据到下一页。问题是我想对两个表单使用相同的 id，但只需向送货表单添加一个地址，但它似乎只会从第一个/顶部表单中获取数据，这是外卖 -

function Delivery1() {
  var x = document.getElementById("Pickup");
  var y = document.getElementById("Delivery");
  var w = document.getElementById("btn1");
  var z = document.getElementById("btn2");

  if (y.style.display === "none") {
    x.style.display = "none";
    y.style.display = "block";
    w.style.backgroundColor = "#b20c0c";
    z.style.backgroundColor = "#cc1400";
  } else {
    y.style.display = "none";

  }
}


function Pickup1() {
  var y = document.getElementById("Delivery");
  var x = document.getElementById("Pickup");
  var w = document.getElementById("btn1");
  var z = document.getElementById("btn2");
  if (x.style.display === "none") {
    x.style.display = "block";
    y.style.display = "none";
    z.style.backgroundColor = "#b20c0c";
    w.style.backgroundColor = "#cc1400";

  } else {
    z.style.backgroundColor = "#cc1400";
    x.style.display = "none";

  }
}

<center>
  <button id="btn1" onclick="Delivery1()" class="btn" style="height:90px; width: 180px">Delivery</button>
  <button id="btn2" onclick="Pickup1()" class="btn" style="height:90px; width: 180px">Pickup</button>
</center>

<div id="Pickup" style="display: none;">
  <form action="order.html" method="post" id="checkout-order-form">


    <fieldset id="fieldset-billing">
      <legend>Pickup</legend>
      <div>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="email">Phone Number</label>
        <input type="text" name="email" id="email" data-type="expression" data-message="Not a valid phone address" />
      </div>

      <div>
        <label for="country">Select Store</label>
        <select name="country" id="country" data-type="string" data-message="This field cannot be empty">
          <option value="">None</option>
          <option value="Leopold">Leopold</option>

        </select>


    </fieldset>
    <p><input type="submit" id="submit-order" value="Submit" class="btn" /></p>
    </div>
  </form>



  <div id="Delivery" style="display: none;">

    <form action="order.html" method="post" id="checkout-order-form">

      <fieldset id="fieldset-shipping">

        <legend>Delivery</legend>

        <div>
          <label for="name">Name</label>
          <input type="text" name="name" id="name" data-type="string" data-message="This field cannot be empty" />
        </div>
        <div>
          <label for="email">Phone Number</label>
          <input type="text" name="email" id="email" data-type="expression" data-message="Not a valid phone number" />
        </div>

        <div>
          <label for="address">Address</label>
          <h3>(Must be in or in neighbouring suburbs of leopold no more than 10km)</h3>
          <input type="text" name="address" id="address" data-type="string" data-message="This field cannot be empty" />
        </div>


      </fieldset>

      <p><input type="submit" id="submit-order" value="Submit" class="btn" /></p>
  </div>
  </form>
</div>



</div>

<footer id="site-info">
  Copyright &copy; Fu Chinese
</footer>

如果需要，我可以发布 javascript 表单，但它很长。如果有人可以帮助我找到解决方案或更简单的方法来做到这一点，那就太好了。谢谢:)

Answer 1

不能有多个具有相同 ID 的元素。

ID 的用途是标识页面上的元素，因此，每个 ID 只能有一个元素。

多个元素可以具有相同的“名称”，但不能具有相同的 ID。

要解决您的问题，请执行以下操作:

1. 为每个表单输入不同的 ID。
2. 放置属性 form在 input在您的表单中添加标签。

表格1:

<form action="order.html" method="post" id="checkout-order-form-billing">

<input type="submit" id="submit-order" value="Submit" class="btn" form="checkout-order-form-billing" />

表格2:

<form action="order.html" method="post" id="checkout-order-form-shipping">

<input type="submit" id="submit-order" value="Submit" class="btn" form="checkout-order-form-shipping" />

这样，input标签知道要提交哪个表单。

希望有帮助。