Ajax请求成功后表单无法自动提交至指定URL的问题求助

现有表单：

<form id="form_check" action="/orders/place_order/" method="POST" enctype="multipart/form-data">

点击提交按钮时，需求是先通过Ajax把表单数据提交到/accounts/edit_profile/保存为默认地址，等Ajax请求成功后，自动将表单提交到/orders/place_order/完成下单。但目前Ajax请求成功后，表单并未自动提交，必须手动点击提交按钮才能完成最终提交。

现有代码 #

var frm = $('#form_check');
frm.submit(function() {
  var r = confirm("Would you like to save this address as default address?");
  if (r == true) {
    $.ajax({
      type: frm.attr('method'),
      url: '/accounts/edit_profile/',
      data: frm.serialize(),
      success: function (data) {
        frm.submit();
      }
    });
  } else {
    // 用户不同意时的逻辑
  }
  return false;
});

问题根因 #

你在表单的submit事件回调末尾返回了false，这会阻止表单的默认提交行为。而当Ajax成功后调用frm.submit()时，会再次触发你绑定的submit事件，回调又会执行一遍并返回false，相当于又把提交行为阻止了，所以表单根本没提交。

解决方案 #

方案1：调用原生DOM的submit方法 #

直接操作表单的原生DOM元素调用submit()，这个方法不会触发jQuery绑定的submit事件，能直接提交表单：

var frm = $('#form_check');
frm.submit(function() {
  var r = confirm("是否要将此地址保存为默认地址？");
  if (r == true) {
    $.ajax({
      type: frm.attr('method'),
      url: '/accounts/edit_profile/',
      data: frm.serialize(),
      success: function (data) {
        // 调用原生submit方法
        frm[0].submit();
      }
    });
  } else {
    // 用户不同意，直接提交表单
    return true;
  }
  return false;
});

方案2：解绑事件后再提交 #

在Ajax成功回调里，先解除之前绑定的submit事件，再调用提交：

var frm = $('#form_check');
frm.submit(function() {
  var r = confirm("是否要将此地址保存为默认地址？");
  if (r == true) {
    $.ajax({
      type: frm.attr('method'),
      url: '/accounts/edit_profile/',
      data: frm.serialize(),
      success: function (data) {
        // 解绑事件后提交
        frm.off('submit').submit();
      }
    });
  } else {
    return true;
  }
  return false;
});

方案3：添加标记区分提交类型 #

设置一个变量标记是否是自动提交，在回调里判断标记决定是否阻止默认行为：

var frm = $('#form_check');
var isAutoSubmit = false;

frm.submit(function() {
  if (isAutoSubmit) {
    // 自动提交，放行
    return true;
  }

  var r = confirm("是否要将此地址保存为默认地址？");
  if (r == true) {
    $.ajax({
      type: frm.attr('method'),
      url: '/accounts/edit_profile/',
      data: frm.serialize(),
      success: function (data) {
        isAutoSubmit = true;
        frm.submit();
      }
    });
  } else {
    // 用户不同意，直接提交
    return true;
  }
  return false;
});

额外注意事项 #

你的表单设置了enctype="multipart/form-data"，如果表单包含文件上传控件，frm.serialize()不会包含文件数据，此时Ajax提交需要用FormData处理，修改Ajax部分代码：

$.ajax({
  type: frm.attr('method'),
  url: '/accounts/edit_profile/',
  data: new FormData(frm[0]), // 使用FormData
  processData: false, // 禁止jQuery处理数据
  contentType: false, // 禁止jQuery设置Content-Type
  success: function (data) {
    frm[0].submit();
  }
});

内容的提问来源于stack exchange，提问作者Niiteesh