如果页面上有多个表单，如何使用 jQuery bind-submit 提交一个表单？

Question

我将 jQuery 的提交函数绑定到表单标签。这适用于一个表单，但如果我有多个表单，它会提交 Post 变量中所有表单的数据。

我怎样才能只提交一份表格？

$('form').bind('submit',function() {
    var data = $('form').serializeAnything();
    $.post('forms/form.ajax.submit.php',data,function(response) {
        ...
});

Answer 1

为您的表单使用 ID，并将其用于数据变量。

var data = $('#this_form').serializeAnything();

或通过查找父表单来遍历，例如$(this).closest('form').serializeAnything();

Answer 2

var data;
data=$('form1').serializeAnything();
data+=$('form2').serializeAnything();
data+=$('form3').serializeAnything();

Answer 3

您可以使用选择器 id 或类来做到这一点。

例如

var data = $('#formID').serializeAnything();

var data = $('.formCLASS').serializeAnything();

Answer 4

你想要 $(this).serializeAnything(); 而不是 $('form').serializeAnything();（或者，如果 jQuery 的标准序列化函数可以做到，也许是 $(this).serialize();）。

/* attach a submit handler to each form */
$('form').submit(function (event) {

    /* stop form from submitting normally */
    event.preventDefault();

    /* get some values from elements on the page: */
    var $form = $(this),
        form_data = $form.serialize(),
        url = $form.attr('action');

    /* Send the data using post */
    var posting = $.post(url, form_data);
    console.log('finished ajax post');

    /* Put the results in a div */
    posting.done(function (data) {
        console.log('now load response');
        $('#result').empty().append( $(data) );
    });
});

见a working example at http://jsfiddle.net/jhfrench/QjaTq/29/。