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?

jQuery表单按引用形式提交

1 个答案: