Question

我完全清楚之前发布过与此类似的问题。我找不到在以前的帖子中解决我的问题的方法。

我在页面中有两个表单，其中包含其他几种表单。当点击第二个表单的提交按钮时，我希望发生以下情况：

提交表格1，然后提交表格2.

但是当点击form1的提交按钮时，只提交form1。

我的代码：

<form class='forms' id='form1'>
     <!--form content-->
     <button type='submit' id='submit-button-1'>Submit</button>
</form>

<form class='forms' id='form2'>
     <!--form content-->
     <button type='submit' id='submit-button-2'>Submit</button>
</form>

我知道有一种方法可以使用AJAX来实现这一点，但我对使用AJAX几乎没有经验。

Answer 1

请尝试以下方法：

$("#form2").on("submit", function() {
  var $self = $(this);
  var $form1 = $("#form1");
  $.ajax({
    url: yourPSubmitUrl,
    data: $form1.serialize(),
    type: 'POST',
    success: function(result) {
      $self.submit();
    }
 });
  return false;
});

Answer 2

当您正常提交表单时，响应将替换当前页面，因此您只能以这种方式提交表单。

要提交多个表单，您必须保持当前页面不被替换，至少除了最后一个表单之外的所有页面。

您可以在表单上设置target属性，使响应转到其他位置，例如页面上的iframe。
您可以使用AJAX发布表单，然后将响应返回给Javascript，而不是替换当前页面。

Answer 3

我会为两个表单定义公共事件处理程序，但在内部检查提交的表单是否需要在第一个表单之后提交第二个表单。

在代码中它看起来像这样：

$('#form1, #form2').submit(function(e) {

    e.preventDefault();

    // In both cases Form 1 is submitted first
    var submition1 = submitForm.call($('#form1')[0]);

    if (this.id === 'form2') {
        submition1.then(function() {
            submitForm.call($('#form2')[0]);
        });
    }

});

function submitForm() {
    return $.post(this.action, $(this).serialize());
}

为方便起见，我将实际的AJAX请求移到了单独的函数中。

这里的想法是Form1在两种情况下都是第一次提交。因此，如果原始提交来自Form2，我们将简单链接到返回的承诺，以便在第一个提交完成后安排下一个提交。

演示： http://jsfiddle.net/ves2665v/

使用Ajax以特定顺序提交特定表单

3 个答案: