jQuery表单根据参考表格提交

Question

以下是一个表单示例。它运行良好，没有任何问题。

<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form> 
    <input type="hidden" name="cartkey" value=""> 
    <input type="hidden" name="id" value="10"> 
    <button type="submit" value="submit"> Add to Cart</button> 

<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form> 
<input type="hidden" name="cartkey" value=""> 
<input type="hidden" name="id" value="3"> 
<button type="submit" value="submit"> Add to Cart</button> 

<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form> 
<input type="hidden" name="cartkey" value=""> 
<input type="hidden" name="id" value="5"> 
<button type="submit" value="submit"> Add to Cart</button> 

现在我必须创建相同的表单，但需要稍作修改。我有我这样的标记

<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"> 
    <button type="submit" value="submit" data-value="10" data-name="id">Try Now</button> 
    <button type="submit" value="submit" data-value="3" data-name="id">Try Now</button> 
    <button type="submit" value="submit" data-value="5" data-name="id">Try Now</button> 
</form> 
To submit the form I have used this jQuery. 


<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery('button[type=submit]').click(function() { 
     var Id = jQuery(this).attr('data-value'); 
     var Name = jQuery(this).attr('data-name'); 
     alert(Name); 
     }) 
    }); 
    </script> 

但从jQuery的这一点，我不知道下一步该怎么做。那么有人可以好好告诉我如何通过jQuery提交表单提供的标记相同的值？

更新 是的我可以改变我的标记，如果你这样认为。

Answer 1

首先，你的HTML不正确。移动输入内部形式的：

<form action="..." class="form-horizontal" method="post" accept-charset="utf-8"> 
    <input type="hidden" name="cartkey" value=""> 
    <input type="hidden" name="id" value="10"> 
    <button type="submit" value="submit"> Add to Cart</button> 
</form> 

你可以有许多形式像上面。在JavaScript方面，您必须为所有表单捕获submit事件。在提交处理程序中，将提交this表单。

$(document).ready(function() { 
    $("form").on("submit", function() { 
     $.ajax({ 
      type: "POST", 
      url: formUrl, 
      data: $(this).serializeArray(), 
      success: function (data) { 
       /* handle success */ 
      }, 
      error: function (data) { 
       /* handle error */ 
      }, 
      dataType: "json" // remove this if the server doesn't send json data 
     }); 
     return false; // prevent default browser behavior 
    }); 
}); 

注$(this).serializeArray() - 这会返回一个这样的数组：

[{ 
    name: "some-input-name", 
    value: "some-input-value" 
}, ... 

此外，您可以签出return false用法：When and why to 'return false' in JavaScript?