合并提交的两种形式的值

Question

我在一个html页面上有两种形式。使用jQuery，当提交第一个数据时，是否有可能将这两个表单中的数据放入POST数据中？

Answer 1

一种方法是复制所有的窗口2的输入一旦数据验证检查成功，就会将其转换为form1。这假定你没有做AJAX提交。

// new onsubmit function for form1 
function form1_onsubmit() 
{ 
    if (!EntryCheck()) return false; 

    $('#form2 :input').not(':submit').clone().hide().appendTo('#form1'); 

    return true; 
} 

如果你想迎合点击提交两次，可能是因为从服务器提交失败，我们需要在新的复制之前删除任何复制输入。

// new onsubmit function for form1 
function form1_onsubmit() 
{ 
    $('#form1 :input[isacopy]').remove(); 

    if (!EntryCheck()) return false; 

    $('#form2 :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#form1'); 

    return true; 
} 

Answer 2

jQuery的序列化支持多种表单元素，所以这是可以做到的：

$('#form1, #form2').serialize(); 

而对于你的情况，你可以这样做：

$('#form1').submit(function() { 
    var action = $(this).attr('action'); 
    if (!EntryCheck()) return false; 
    $.ajax({ 
     url : action, 
     type : 'POST', 
     data : $('#form1, #form2').serialize(), 
     success : function() { 
      window.location.replace(action); 
     } 
    }); 
    return false; 
}); 

Answer 3

我用下面的代码在我的网站上提交两个表单的数据。

的想法是，你使用serialize，并结合数据和平衡，要在$.ajax功能data参数多种形式的数据得到。

。

// submits two forms simultaneously 
function submit_forms(form1_id, form2_id) 
{ 
    var frm1_name = $("#" + form1_id).attr('name'); 
    var frm2_name = $("#" + form2_id).attr('name'); 

    if (frm1_name == frm2_name) 
    { 
     alert('The two forms can not have the same name !!'); 
    } 
    else 
    { 
     var frm1_data = $("#" + form1_id).serialize(); 
     var frm2_data = $("#" + form2_id).serialize(); 

     if (frm1_data && frm2_data) 
     { 
      $("#div_busy").html('<strong>Processing...</strong><br /><img id="busy" src="./images/progress_bar.gif" border="0" style="display:none;" />'); 
      $("#busy").fadeIn('slow'); 

      $.ajax(
      { 
        type: "POST", 
        url: "process_sticker_request.php", 
        data: frm1_data + "&" + frm2_data, 
        cache: false, 

        error: function() 
        { 
         $("#busy").hide('slow'); 
         $("#div_busy").css({'color':'#ff0000', 'font-weight':'bold'}); 
         $("#div_busy").html('Request Error!!'); 
        }, 
        success: function(response) 
        { 
         $("#div_busy").hide('slow'); 
         $("#hdnFormsData").html(response); 

          // open popup now with retrieved data 
          window.open('', 'popup2', 'toolbars = 1, resizable=1, scrollbars=1, menubar=1'); 
          document.getElementById("prt").action = 'win_sticker.php'; 
          document.getElementById("prt").target = 'popup2'; 
          document.getElementById("prt").submit(); 

          // reset the action of the form 
          document.getElementById("prt").action = 'list_preview.php'; 

        } 
      });     
     } 
     else 
     { 
      alert('Could not submit the forms !!'); 
     } 
    } 
} 

Answer 4

而其他的答案解决你问的问题，可能你为什么有2种独立的形式，如果你想发送的每当用户提交一个既形式的内容是值得考虑的。

如果您使用2种不同的表单直观地将它们分开，更好的方法可能是使用CSS将元素放置在屏幕上，如您所愿。这样，您就不依赖Javascript的存在来确保您的表单正确填充。

Answer 5

Lachlan Roche的解决方案仅复制元素，但不复制值。这会照顾值的为好，可用于处理任何一种形式提交：

<script type="text/javascript"> 
    var submitter = { 
    combine: function (form1, form2) { 
     $('#' + form1 + ' :input[isacopy]').remove(); 
     $('#' + form2 + ' :input').not(':submit').not('textarea').not('select').each(function() { $(this).attr('value', $(this).val()); }); 
     $('#' + form2 + ' textarea').each(function() { $(this).text($(this).val()); }); 
     $('#' + form2 + ' select').each(function() { $('option[value!="' + $(this).val() + '"]', this).remove(); $('option[value="' + $(this).val() + '"]', this).attr('selected', 'selected'); }); 
     $('#' + form2 + ' :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#' + form1); 
     return true; 
    } 
    }; 
</script> 

而且你的表单标签看起来是这样的（注意传递给函数的形式IDS切换）：

<form name="my_first_form" id="my_first_form" method="post" onsubmit="if (!submitter.combine('my_first_form', 'my_second_form')) { return false; }"> 
... 
<form name="my_second_form" id="my_second_form" method="post" onsubmit="if (!submitter.combine('my_second_form', 'my_first_form')) { return false; }"> 

表单验证可以适用于任何你喜欢的地方 - 如果你的验证器是提交者对象的另一个函数，反之亦然，这将是最有意义的。

Answer 6

这是干净的JavaScript方法合并两种形式。我使用Prototype和jQuery在POST请求上测试它，它可以工作。这是事情：

var data1 = document.getElementById（'form1'）。serialize（）;

注： 'form1中' 是形成id.You需要内<表格ID = “form1中”> </FORM>

变种DATA2 =的document.getElementById（ '窗口2'）设置它。连载（）;

注： '窗口2' 是形成id.You需要内<表格ID = “窗口2” 设置> </FORM>

现在你有两个瓦尔和两个串行化数据（数组）。您可以轻松地合并它们。你的表单将会有关联。数组，当您尝试使用concat函数时，可能会出现问题。

var mergeddata = data1 +'&'+ data2;

这就是它！您可以通过ajax调用轻松发送它们。例如（的Prototype.js）：

新的Ajax.Request（URL，{ 方法： '后'， 参数：mergeddata，....

干杯， Kristijan

Answer 7

使用serialize结合表单和提交使用Ajax一直工作，直到我添加一个“导出”按钮（发送数据作为Excel文件）。为此，我需要做一个完整的回发，所以我最终选择了这种方法。适当的合并技术，并修复了一些按钮，选择和textareas一路上的问题：

$("body").on("submit", ".combineForm", function() { 

    var frm = $(this); 
    var action = frm.attr("action"); 
    var method = frm.attr("method"); 
    var target = frm.data("updateTarget"); 

    var combined = $(".combineForm"); 

    //get the submit button that was clicked 
    var btn = $(this).find("button[type=submit]:focus"); 
    var btnName = btn.attr("name"); 
    var btnValue = btn.attr("value"); 

    //create an in memory form to avoid changing the existing form 
    var f = $("<form action='" + action + "' method='" + method + "'/>") 

    //Browsers send the name and value of the clicked button but serialize, clone and our copy can't 
    //So add a hidden field to simulate browser behaviour 
    if (btnName) 
     f.append("<input name='" + btnName + "' type='hidden' value='" + btnValue + "' />") 

    if (btnValue === "export") {//exporting to a file needs full submit 

     //merge forms with class 'combineForm' by copying values into hidden inputs 
     // - cloning doesn't copy values of select or textareas 
     combined.find(":input").not("submit").each(function() { 
      var inp = $("<input name='" 
         + $(this).attr("name") 
         + "' type='hidden' value='" 
         + $(this).val() + "' />") 
      f.append(inp); 
     }); 

     f[0].submit(); 
     return false; 
    } 

    //merge forms for ajax submit 
    var data = combined.serialize() + "&" + f.serialize(); 
    $.ajax({ 
     url: action, 
     type: 'POST', 
     data: data, 
     dataType: "html", 
     success: function (html) { 
      $(target).html(html); 
     } 
    }); 

    return false; 
}); 

Answer 8

另一种方法是你自己的数据合并到形式连载

 var data = {}; 
     data['key'] = 'value'; 

     e.preventDefault(); 
     $.ajax({ 
      url : url, 
      dataType : 'json', 
      type : 'post', 
      data : $(this).serialize() + '&' + $.param(data), 
      success : function(data) { 

      }, 
      error : function() { 

      } 
     });