在jQuery中提交表单[重复]

Question

我有这样的表格

<form id="add-to-cart" action="http://example.com/add_to_form" method="post">
  <div>
  <input type="hidden" name="cartkey" value="">
  <input type="hidden" name="id" value="10">
  <a href="#" id="10"  class="buy-now-button">buy Now</a>
  </div>
  <div>
  <input type="hidden" name="cartkey" value="">
  <input type="hidden" name="id" value="12">
  <a href="#" id="12" class="buy-now-button">buy Now</a>
  </div>
  <div>
  <input type="hidden" name="cartkey" value="">
  <input type="hidden" name="id" value="19">
  <a href="#" id="19"  class="buy-now-button">buy Now</a>
  </div>    
</form>

我想通过获取 id 使用 jquery 提交表单。那么有人可以告诉我该怎么做吗？

更新 您可以通过每个链接看到我有 id。我只想将此 id 传递给表单操作。

Answer 1

尝试使用.submit()函数手动触发表单的提交，

$('#add-to-cart').submit();

Answer 2

您可以使用 .submit() 函数通过 id 的 .. 提交您的表单

Answer 3

你需要像这样尝试。否则你不能得到结果。

<form id="add-to-cart" action="http://example.com/add_to_form" method="post">
 <div>
  <input type="hidden" name="cartkey" value="">
  <input type="hidden" name="id" value="">
  <a href="#" id="10"  class="buy-now-button">buy Now</a>
 </div>
 <div>
   <a href="#" id="12" class="buy-now-button">buy Now</a>
 </div>
 <div>
  <a href="#" id="19"  class="buy-now-button">buy Now</a>
 </div>    
 </form>
<script>
$('.buy-now-button').click(function(){
   $('[name="id"]').val($(this).attr("id"));
   $('#add-to-cart').submit();
});
</script>

Answer 4

As mentioned in this SO article，如果您给提交按钮一个name 属性（显然，一个value 来发布），您可以回发按钮的值。

来自链接的问题（带有更正的代码 sn-p）：

<input type="submit" name="respond" value="Confirm" class="btn_confirm" />
<input type="submit" name="respond" value="Ignore" class="btn_ignore" />

将回传到服务器的“响应”值将包含"Ignore" 或"Confirm"，具体取决于单击的按钮。

我建议添加这些属性，以便表单提交将返回您想要的值，并且不需要自定义代码或自定义事件。这应该更容易理解。

Answer 5

    <form id="add-to-cart" action="test.php" method="post">
      <div>
          <input type="hidden" name="cartkey" value="">
          <input type="hidden" name="id" value="10">
          <a href="#" id="10"  class="buy-now-button">buy Now</a>
      </div>
      <div>`enter code here`
      <input type="hidden" name="cartkey" value="">
        <input type="hidden" name="id" value="12">
      <a href="#" id="12" class="buy-now-button">buy Now</a>
      </div>
      <div>
      <input type="hidden" name="cartkey" value="">
        <input type="hidden" name="id" value="19">
      <a href="#" id="19"  class="buy-now-button">buy Now</a>
      </div>    
      <input type="hidden" name="currentId" id="currentId" >
    </form>

    <script>
    $( ".buy-now-button" ).click(function() {
       $( "#currentId" ).val(this.id);
      $( "#add-to-cart" ).submit();
    });
    </script>

Your can get the current id from $_POST['currentId']

Answer 6

由于您有多个同名输入，您的表单看起来更像三个表单。

<form class="add-to-cart" action="http://example.com/add_to_form" method="post">
  <input type="hidden" name="cartkey" value="">
  <input type="hidden" name="id" value="10">
  <button type="submit">buy Now</button>
</form>
<form class="add-to-cart" action="http://example.com/add_to_form" method="post">
  <input type="hidden" name="cartkey" value="">
  <input type="hidden" name="id" value="12">
  <button type="submit">buy Now</button>
</form>
<form class="add-to-cart" action="http://example.com/add_to_form" method="post">
  <input type="hidden" name="cartkey" value="">
  <input type="hidden" name="id" value="19">
  <button type="submit">buy Now</button>
</form>

现在，如果您想通过 ajax 提交表单，您可以执行以下操作：

$(".add-to-cart").on("submit", function(e) {
    e.preventDefault();
    e.stopPropagation();
    $.ajax({
        url: $(this).attr("action"),
        method: "POST",
        data: $(this).serialize()
    });
});

更新：

但除非你想在 javascript 被停用的情况下回退，否则你不需要任何形式：

<a href="#" id="10"  class="buy-now-button">buy Now</a>
<a href="#" id="12"  class="buy-now-button">buy Now</a>
<a href="#" id="19"  class="buy-now-button">buy Now</a>

JavaScript：

$(".buy-now-button").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    $.ajax({
        url: "http://example.com/add_to_form",
        method: "POST",
        data: {id: $(this).attr("id")}
    });
});