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

【问题标题】：How can i Save two different forms At the same time Using Jquery or Javascript?如何使用 Jquery 或 Javascript 同时保存两个不同的表单？
【发布时间】：2013-07-19 01:33:18
【问题描述】：

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

这是我尝试使用 Javascript 保存此内容

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

但在控件中的Contact Form Submit 上出错，因为在保存作为其外键的联系表单时，Worker Form 的ID 仍然为空

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

我也试过这个方法

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


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

但它只会出现在 Else，因为 ID 为空

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

谢谢 :D 工人地址是工作表 Worker Contact 是 ContForm

我想在它们填充所有文本框时都保存它们

【问题讨论】：

我建议使用AJAX 提交表单。或者您可能想等到'#workForm' 表单完成提交，以便您可以提交'#contForm'
我可以看看我该怎么做@Shawn31313 吗？
我建议使用一种形式。你到底为什么要使用两个？
为什么不把它作为一个表单提交，然后在后端处理外键约束？
@JanR 问题更新

标签： c# javascript jquery asp.net-mvc asp.net-mvc-3

【解决方案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 个表单。

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

【讨论】：

嗯，所以这些帖子不是使用 AJAX 提交的吗？那么当你提交页面刷新时呢？
你说得对，保存时页面刷新
好的，所以当表单提交时。尝试向 URL 传递一个查询，例如：“?id=123456&posted”。加载页面时，使用 javascript 查找，如果找到，请提交其他表单。
我想不出除了localStorage 或cookies 之外的任何其他方法。 AJAX 可能是最好的方法。
先生，他们在同一个页面上

【解决方案2】：

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

现在，您在 AJAX 调用中真正做了什么。您应该使用 form2js 或 jquery 序列化功能等插件将表单内容序列化为 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 跨域。

【讨论】：