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?