javascript - 使用 jquery 或 ajax 同时保存两个表单？

Question

我计划保存 2 个表单，但第一个表单是我获取第二个表单的外键的地方。

这是我尝试使用 Javascript 保存它：

$("#btnSave").click(function (e) {
        e.preventDefault();
        $('#workForm').submit();
        $('#contForm').submit();
    });

但它在控件中的联系表单提交上出错，因为在保存作为其外键的联系表单时，工作表单的 ID 仍然为空

如何使用 Jquery 和 Javascript 和 Ajax 处理这个问题？

我也试过这个方法：

$("#btnSave").click(function (e) {
        e.preventDefault();


        if (Id != 0) {
            $('#workForm').submit();
            $('#contForm').submit();
        } else {
           $('#workForm').submit(); }
    });

但它只适用于 Else，因为 ID 为空

我希望有人可以在这里帮助我

Worker Address 是 WorkForm Worker Contact 是 ContForm

当它们填充所有文本框时，我想保存它们

Answer 1

您需要使用 .ajax 发布这两个表单。序列化两个表单中的数据，然后发布到您的服务器脚本。

$("#btnSave").click(function (e) {
  e.preventDefault();
  //Serialize the form data
  var formOne$ = $('#workForm').serialize();
  var formTwo$ = $('#contForm').serialize();

  $.ajax( { url : "YOURURL", type: 'post', data : { formOne : formOne$ , formTwo : formTwo$ }, 
    success : function( responseText ){
        //Forms were submitted
    },
    error : function( e ){
        alert( ' Error : ' + e.statusText );
    }
  });

});

Answer 2

您将不得不使用 ajax，因为

$('#contForm').submit();

将永远不会运行，因为页面将在第一次调用时被卸载：

 $('#workForm').submit();

Answer 3

您可以使用提交第一个表单，ajaxSubmit()并在成功后提交第二个表单。

$("#btnSave").click(function() {
    $('#workForm').ajaxSubmit({
        forceSync: true,
        error: function(errorDetails) {
            //Error Handling
        },
        success: function(successData) {
            $('#contForm').submit();
        }
    });
});