jQuery表单提交按引用表单

jQuery form submit as per referenced form

本文关键字：表单 引用 表单提交 jQuery      更新时间：2023-09-26

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

    <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表单?

如果你愿意，我可以修改我的标记。

首先，你的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'在JavaScript中?

相关文章：