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的元素。

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

为每个表单输入不同的ID。
将属性def alert_entries(): with open('large_size_file') as f: .... .... for entry in entry_re.findall(f.read()): yield entry放入表单的form标记中。

表格1：

input

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

表格2：

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

<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" />标签知道要提交的表单。

希望有帮助。

HTML javascript提交不同形式的相同数据类型，2个按钮

1 个答案: