如何使用Jquery或Javascript同时保存两个不同的表单？

Question

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

这是我尝试使用Javascript保存它

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

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

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

我也尝试过这种方法。

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


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

但它只转到Else，因为ID为空

我希望有人能在这里帮助我

谢谢:D工作人员地址是WorkForm工作人员联系人是ContForm

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

​

​

Answer 1

下面是我的AJAX建议的工作原理：

$.post("/form1.php", {
  //form data here
}, function (data) { // get data to use in the second form
    $.post("/form2.php", {
      //form data here
    }, function () {

    });
});

然而，我同意其他人的观点，只使用1表单。

您最初是如何提交表单的？

Answer 2

您肯定需要使用AJAX。对于每个ajax调用，都需要指定响应处理函数。当第一个AJAX调用的响应返回时，您可以使用AJAX发起保存第二个表单。

现在，您在AJAX调用中真正做了什么。您应该使用form2js或jquery serialize功能之类的插件将表单内容序列化为JSON。然后使用$.ajax发布(注意:这不同于常规的表单提交)。在成功响应中，您需要确保您的服务器返回使用AJAX提交第二个表单所需的必要信息。在获得响应时，进行必要的UI更新，收集第二个表单提交所需的信息，序列化它，然后使用另一个$.ajax再次发送它。

下面是一个粗略的代码结构。

function submitForms() {
   var form1Contents = serialize_form1_to_json;
   $.ajax({ 
       url: form1_action_url,
       type: "POST",
       data: form1Contents
   }).done(function (data) {
      //data is the response of first form save from server. should contain the id you need for form 2
      var form2Contents = serialize_form2_to_json;
      set_id and any other details from form1 _on_form2
      $.ajax({
       url: form2_action_url,
       type: "POST",
       data: form2Contents
      }).done(function(){
         alert('both forms saved.');
      });
   });
}

注意:要提交的表单必须与包含表单的页面具有相同的域。由于安全问题，AJAX不允许跨域。