在提交时合并两个表单中的值

Question

我在一个html页面上有两个表单.使用jQuery,是否有可能在提交第一个数据时将两个表单中的数据都放入POST数据中？

Answer 1

jQuery serialize支持多个表单元素,因此可以这样做:

$('#form1, #form2').serialize();

对于您的情况,您可以:

$('#form1').submit(function() {
    var action = $(this).attr('action');
    if (!EntryCheck()) return false;
    $.ajax({
        url  : action,
        type : 'POST',
        data : $('#form1, #form2').serialize(),
        success : function() {
            window.location.replace(action);
        }
    });
    return false;
});

Answer 2

一种方法是在数据验证检查成功后将所有form2的输入复制到form1.这假设您没有进行AJAX提交.

// new onsubmit function for form1
function form1_onsubmit()
{
    if (!EntryCheck()) return false; 

    $('#form2 :input').not(':submit').clone().hide().appendTo('#form1');

    return true;
}

如果您想要提交两次提交,可能是因为服务器提交失败,我们需要删除任何复制的输入,然后再复制新的输入.

// new onsubmit function for form1
function form1_onsubmit()
{
    $('#form1 :input[isacopy]').remove();

    if (!EntryCheck()) return false; 

    $('#form2 :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#form1');

    return true;
}

Answer 3

Lachlan Roche的解决方案只复制元素,而不是值.这也将处理值,并可用于处理表单提交:

<script type="text/javascript">
  var submitter = {
    combine: function (form1, form2) {
      $('#' + form1 + ' :input[isacopy]').remove();
      $('#' + form2 + ' :input').not(':submit').not('textarea').not('select').each(function() { $(this).attr('value', $(this).val()); });
      $('#' + form2 + ' textarea').each(function() { $(this).text($(this).val()); });
      $('#' + form2 + ' select').each(function() { $('option[value!="' + $(this).val() + '"]', this).remove(); $('option[value="' + $(this).val() + '"]', this).attr('selected', 'selected'); });
      $('#' + form2 + ' :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#' + form1);
      return true;
    }
  };
</script>

并且您的表单标签看起来像(注意传递给函数的表单ID被切换):

<form name="my_first_form" id="my_first_form" method="post" onsubmit="if (!submitter.combine('my_first_form', 'my_second_form')) { return false; }">
...
<form name="my_second_form" id="my_second_form" method="post" onsubmit="if (!submitter.combine('my_second_form', 'my_first_form')) { return false; }">

表单验证可以适用于您喜欢的任何地方 - 如果您的验证器是提交者对象的另一个函数,则最有意义,反之亦然.

Answer 4

将自己的数据合并为表单序列化的另一种方法

        var data = {};
        data['key'] = 'value';

        e.preventDefault();
        $.ajax({
            url : url,
            dataType : 'json',
            type : 'post',
            data : $(this).serialize() + '&' + $.param(data),
            success : function(data) {

            },
            error : function() {

            }
        });