使用一個提交按鈕提交多個表單

Question

我有兩種形式。 我想用1個按鈕提交兩個表格。 有什么方法可以幫助我嗎？

例：

<form method="post" action="">
<input type="text" name="something">
</form>

<form method="post" action="">
<input type="text" name="something">
<input type="submit" value="submit" name="submit">
</form>

我希望使用1個提交按鈕提交兩種形式。 任何幫助，將不勝感激。

Answer 1

這里的問題是，當您提交表單時，當前頁面將停止。 該頁面上的任何活動都將停止。 因此，單擊“提交”以獲取表單或使用JavaScript提交表單后，頁面即為歷史記錄。 您無法繼續提交其他頁面。

一種簡單的解決方案是通過在新窗口或選項卡中加載表單的提交來保持當前頁面處於活動狀態。 發生這種情況時，當前頁面保持活動狀態。 因此，您可以輕松擁有兩種形式，每種形式都在一個窗口中打開。 這是通過target屬性完成的。 為每一個使用獨特的東西：

<form action='' method='post' target='_blank1'>

目標是要使用的窗口或選項卡。 不應有一個名為“ _blank1”的文件，因此它將在新窗口中打開。 現在，您可以使用JavaScript提交兩種形式。 為此，您需要為每個ID賦予唯一的ID：

<form id='myform1' action='' method='post' target='_blank1'>

那是一種形式。 另一個需要另一個ID。 您可以創建一個類型為button的提交按鈕（不提交），從而在單擊時觸發JavaScript：

<submit type='button' onclick="document.getElementById('myform1').submit();document.getElementById('myform2').submit();" value='Click to Submit Both Forms'>

當您單擊按鈕時，JavaScript會同時提交這兩種形式。 結果在新窗口中打開。 有點煩人，但它確實滿足您的要求。 我根本不會那樣做。 有兩個更好的解決方案。

最簡單的方法是制作一種表格，而不是兩種：

<form action='' method='post'>
    <input type='text' name='text1'>
    <input type='text' name='text2'>
    <input type='submit' value='Submit'>
</form>

您可以在form標記之間放置很多HTML，因此輸入框不需要在頁面上緊密放置在一起。

第二個更困難的解決方案是使用Ajax。 該示例肯定比您准備要處理的要復雜。 因此，我建議僅使用一種形式而不是兩種形式。

注意：我提交了此文件后，Nicholas D提交了Ajax解決方案。 如果您根本無法使用一種形式，請使用他的Ajax解決方案。

Answer 2

您必須執行以下操作：

按鈕：

<div id="button1">
    <button>My click text</button>
</div>

js

<script>
   $('#button1').click(function(){
       form1 = $('#idIFirstForm');
       form2 = $('#idISecondForm');
       $.ajax({
        type: "POST",
        url: form1.attr('action'),
        data: form1.serialize(),
        success: function( response ) {
          console.log( response );
        }
      });
      $.ajax({
          type: "POST",
          url: form2.attr('action'),
          data: form2.serialize(),
          success: function( response2 ) {
            console.log( response2 );
          }
      });
   });
</script>

Answer 3

您可以在后台創建偽表單。 沒時間寫代碼，只是理論。 單擊提交后，停止所有其他事件的傳播，並將所需的所有信息收集到附加到文檔的另一種表單中（通過jquery新創建），然后可以提交第三種表單，其中包含所有必要信息。

Answer 4

無需解釋為什么只使用1個按鈕同時提交2個表單，這些工具將使輸入數據可用於其他地方：

選項1 ...代替使用<form> -使用通常的Input語法收集數據。
例如： <input type="text" name="dcity" placeholder="City" />
代替本例中的表單：

<form class="contact" method="post" action="cheque.php" name="pp" id="pp">
  <label for="invoice">Your Name</label>
   <input type="text" id="invoice" name="invoice" />
  <button class="button" type="submit" id="submit">Do It Now</button>
 </form>

采用：

<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button type="button" onclick="CmpProc();" style="border:none;"><img src="yourimage.png"/>&nbsp;&nbsp;&nbsp;Do&nbsp;It&nbsp;Now</button>

然后，對函數CmpProc()進行編碼以處理處理/提交。 在該函數內部，將Javascript表單對象與submit()方法一起使用，如...

<script type="text/javascript">
   function submitform() {
    document.xxxyourformname.submit();
   }
 </script>

我以某種方式懷疑將兩種形式合而為一的POST / GET是值得重新考慮的。

選項2 ...考慮使用PHP的$_SESSION來存儲您的每個條目以供跨多個頁面使用，而不是使用POST來訪問下一頁的數據。 （請記住使用session_start();在每個頁面的開始處您要存儲或檢索變量，以便在頁面上可以使用Global方面）。

Answer 5

你看 僅HTML不可能做到這一點。 您可以采用一種形式獲取輸入，也可以使用jquery為您處理此輸入。