用外部提交按鈕提交兩種不同的表單無法正常工作

Question

我正在創建一個添加到購物車程序，並需要將其屬性（顏色，大小）添加到購物車中，爲此我需要將兩個表單一起提交。我不知道我在哪裏錯了我創建了這些腳本，但它只提交了使用jquery而不是其他形式爲submit()選擇的第一個表單。

下面給出的是我的代碼與代碼段，這是JSFIDDLE

$(document).ready(function(){ 
 
    $('#cart').click(function (e1) { 
 
    var $form = $('#masterform'); 
 
    var $formcolor = $('#colorform'); 
 
    var $checkbox = $('.roomselect'); 
 
    var $checkboxcolor = $('.colorselect'); 
 
    if (!$checkbox.is(':checked')) 
 
    { 
 
     $('#tipdivcontent').css("display", "block"); 
 
     $("#tipdivcontent").delay(4000).hide(200); 
 
     e.preventDefault(); 
 
    } 
 
    else 
 
    { 
 
     if (!$checkboxcolor.is(':checked')) { 
 
      $('#tipdivcontentcolor').css("display", "block"); 
 
      $("#tipdivcontentcolor").delay(4000).hide(200); 
 
      e.preventDefault(); 
 
     } else { 
 
      $form.submit(); 
 
      $formcolor.submit(); 
 
     } 
 
    } 
 
    }); 
 
});

#tipdivcontent 
 
{ 
 
    border:1px solid black; 
 
    margin-top:0px; 
 
    background-color:white; 
 
    height:50px; 
 
    width:102px; 
 
    display:none; 
 
    position:relative; 
 
    background-color:red; 
 
    color:yellow; 
 
    font-weight:bold; 
 
} 
 
#tipdivcontentcolor 
 
{ 
 
    border:1px solid black; 
 
    margin-top:0px; 
 
    background-color:white; 
 
    height:18px; 
 
    width:292px; 
 
    display:none; 
 
    position:absolute; 
 
    background-color:red; 
 
    color:yellow; 
 
    font-weight:bold; 
 
}

<form action="" method="POST" id="masterform"> 
 
    <table border="1" cellspacing="0"> 
 
     <tr> 
 
      <th colspan="4">Sizes</th> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="2.2">2.2</label> 
 
      </td> 
 
      <td> 
 
       <input class="roomselect" type="radio" id="2.2" name="size" value="twopointtwo"> 
 
      </td> 
 
      <td> 
 
       <label for="2.4">2.4</label> 
 
      </td> 
 
      <td> 
 
       <input class="roomselect" type="radio" id="2.4" name="size" value="twopointfour"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="2.6">2.6</label> 
 
      </td> 
 
      <td> 
 
       <input class="roomselect" type="radio" id="2.6" name="size" value="twopointsix"> 
 
      </td> 
 
      <td> 
 
       <label for="2.8">2.8</label> 
 
      </td> 
 
      <td> 
 
       <input class="roomselect" type="radio" id="2.8" name="size" value="twopointeight"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="3" align="center"> 
 
       <label for="2.10">2.10</label> 
 
      </td> 
 
      <td> 
 
       <input class="roomselect" type="radio" id="2.10" name="size" value="twopointten"> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</form> 
 
<div id="tipdivcontent">Please Select Size.</div> 
 
<input type="submit" value="To Cart" class="cartorcheckoutbutton" id="cart"> 
 
<form action="" method="POST" id="masterform"> 
 
    <table border="1" cellpadding="2"> 
 
     <tr> 
 
      <th colspan="8">COLORS</th> 
 
     </tr> 
 
     <tr> 
 
      <th title='White' style='background-color:white;' height='15' width='20'> 
 
       <input type='radio' name='color' class="colorselect" value='white'> 
 
      </th> 
 
      <th title='Red' style='background-color:red;' height='15' width='20'> 
 
       <input type='radio' name='color' class="colorselect" value='red'> 
 
      </th> 
 
      <th title='Green' style='background-color:green;' height='15' width='20'> 
 
       <input type='radio' name='color' class="colorselect" value='green'> 
 
      </th> 
 
      <th title='Blue' style='background-color:blue;' height='15' width='20'> 
 
       <input type='radio' name='color' class="colorselect" value='blue'> 
 
      </th> 
 
     </tr> 
 
    </table> 
 
</form> 
 
<div id="tipdivcontentcolor">Please Select Color.</div>

Answer 1

您可以嘗試將輔助格式的顏色輸入分配給您的「主」格式。只要在任何輸入上使用<input form='formID' ...>，都會將該輸入分配給其他表單，而不管它在頁面上的位置。

// When the 'master' form is submitted... 
 
$("#masterForm").on("submit", function(e) { 
 
    "use strict"; 
 
    // Stop the default action 
 
    e.preventDefault(); 
 
    
 
    if ($("input[type='radio']:checked").length === 0) { 
 
    alert("You must check at least one color option."); 
 
    return false; 
 
    } 
 
    
 
    // *for logging* 
 
    // write the contents of the submitted data 
 
    $("p").html("submitted data: " + $(this).serialize()); 
 
    console.log("submitted data: " + $(this).serialize()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="masterForm"> 
 
    <input name="someField" type="text" value="test value"> 
 
</form> 
 

 
<form id="anotherForm"> 
 
    <label> 
 
    <input name="color" type="radio" value="blue" form="masterForm">Blue 
 
    </label> 
 
    <label> 
 
    <input name="color" type="radio" value="red" form="masterForm">Red 
 
    </label> 
 
</form> 
 

 
<!-- Submit button outside of the form --> 
 
    <button type="submit" form="masterForm">Submit</button> 
 

 
<p></p>

如果上面的選項（和連接段）將不會爲你工作，嘗試與相關領域的附加FORMDATA。這樣的事情（未經測試）：

// When the 'master' form is submitted... 
    $("#masterForm").on("submit", function(e) { 
    "use strict"; 
    // Stop the default action 
    e.preventDefault(); 

    var submissionData = $(this).serialize(); 
    submissionData += "&color=" + $("#slaveForm").find("input[name='color']:checked").val() 

    // do stuff ... 
}); 

Answer 2

形式是一組數據，通過POST請求被髮送（或GET）。你所要求的是沒有意義的。如果有可能，那麼你仍然不應該這樣做。無論HTML和CSS問題如何讓您將表單拆分，我建議您將其作爲您的實際問題放在這裏。

Answer 3

提交表單，除非它具有指向框架或其他窗口的目標屬性，否則將導致發出HTTP請求以創建新頁面。

同時提交兩個表單就像是在同一時間跟隨兩個鏈接。它不能做到。

您需要：

• 重構代碼，以便它使用一個單一的形式。這幾乎肯定是最有意義的。
• 向頁面添加一對框架並將每個表單提交給另一個表單。
• 用JavaScript收集第一個表單的數據，使用Ajax將其發送到服務器，然後（在獲得響應後）提交第二個表單。

Answer 4

如果你想發送多個形式作爲一個單一的一個，我可以建議使用FORMDATA對象（文件https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects）

var formData = new FormData(); 

formData.append("size", $('input[name=size]:checked').val()); 

formData.append("color", $('input[name=color]:checked').val()); 

var request = new XMLHttpRequest(); 
request.open("POST", "yourformtarget"); 
request.send(formData); 

Answer 5

與JavaScript的一個可能的解決方案：你可以添加定位各個領域的屬性和阿賈克斯將表格：

<div id='masterform'> 
    <input name='field_1' data-field-of='form1'> 
    ... 
</div> 
... 
<div id='colorform'> 
    <input name='field_23' data-field-of='form1'> 
    ... 
</div> 

在JavaScript的代碼可以是這樣的：

$(document).ready(function(){  

    $('#cart').click(function (e1) { 
     var data = $('[data-field-of=form1]').serialize(); 
     $.ajax({ 
      url: "post/url", 
      data: data, 
      type: "POST", 
      success: function(response){ /* handle success */ }, 
      error: function(){ /* handle error */ } 
     }); 
    }); 
});