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放在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标签就知道要提交的表单。

希望能帮助到你。