合併提交的兩種形式的值

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() { 

      } 
     });