Question

我只是html和javascript的新手。我有这样的表格

<form id="add-to-cart" action="http://example.com/test" method="post">
  <div>
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="1">
    <a href="#" onclick="" class="try-now-button">add to cart</a>
  </div>
  <div>
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="3">
    <a href="#" onclick="" class="try-now-button">add to cart</a>
  </div>
  <div>
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="9">
    <a href="#" onclick="" class="try-now-button">add to cart</a>
  </div>
</form>

我希望在单击按钮时，将为该按钮提交值。假设我已点击第3个按钮，您可以在最后一个按钮中看到值为9.所以我想提交值9.那么有人可以告诉我该怎么做吗？我在表单中有超过10个这样的按钮。我刚刚在这里用了3个

Answer 1

表单中的所有值都将被提交，给出id，以便您可以使用这些id来获取值

request.getparameter("idname"); // if you are using java

<form id="add-to-cart" action="http://example.com/test" method="post">
   <div>
      <input type="hidden" name="cartkey" value="">
      <input type="hidden" name="id" **id="cartkeyid1"** value="1">
      <a href="#" onclick="" class="try-now-button">add to cart</a>
   </div>
   <div>
      <input type="hidden" name="cartkey" value="">
      <input type="hidden" name="id" **id="cartkeyid2"** value="3">
      <a href="#" onclick="" class="try-now-button">add to cart</a>
   </div>
   <div>
      <input type="hidden" name="cartkey" value="">
      <input type="hidden" name="id" **id="cartkeyid3"** value="9">
      <a href="#" onclick="" class="try-now-button">add to cart</a>
   </div>
</form>

这样您就可以获得所需的值。

希望这有帮助！

Answer 2

您可以将每个项目设为自己<form>并在其中使用<button type="submit"> o创建个别帖子：

<div>
  <form action="http://example.com/test" method="POST">
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="1">
    <button type="submit" class="try-now-button">add to cart</button>
  </form>
</div>
<div>
  <form action="http://example.com/test" method="POST">
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="3">
    <button type="submit" class="try-now-button">add to cart</button>
  </form>
</div>
<div>
  <form action="http://example.com/test" method="POST">
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="9">
    <button type="submit" class="try-now-button">add to cart</button>
  </form>
</div>

或者您可以使用jQuery的javascript方法

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script>
  var postItem = function (item) {
    $.post('http://example.com/test', item, function (data) {
      alert('Response: ' + data);
    });
  }
</script>
<div>
  <button class="try-now-button" onclick="postItem({ cartkey: '', id: 1 })">
    add to cart
  </button>
</div>
<div>
  <button class="try-now-button" onclick="postItem({ cartkey: '', id: 3 })">
    add to cart
  </button>
</div>
<div>
  <button class="try-now-button" onclick="postItem({ cartkey: '', id: 3 })">
    add to cart
  </button>
</div>

点击即可使用javascript提交表单

2 个答案: