我正在创建一个添加到购物车程序，需要将具有其属性（颜色，大小）的产品添加到购物车中，为此我需要将两个表单一起提交。我不确定我在哪里出错我创建了脚本，但它只使用jquery而不是其他表单提交为submit()选择的第一个表单。
以下是我的代码与Snippet，这是 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>
答案 0 :(得分：1)
您可以尝试将辅助表单中的颜色输入分配给您的主人＆＃39;形成。只需在任何输入上使用<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 ...
});
答案 1 :(得分：0)
表单是通过POST请求（或GET）发送的一组数据。你所要求的是没有意义的。如果有可能那么你仍然不应该这样做。无论HTML和CSS问题是什么让你拆分表格，我建议你把它作为你的实际问题。
答案 2 :(得分：0)
提交表单，除非其目标属性指向框架或其他窗口，否则将导致对新页面发出HTTP请求。
同时提交两个表单就像是同时关注两个链接。它无法完成。
您需要：
答案 3 :(得分：0)
如果您想将多个表单作为单个表单发送，我可以建议使用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);
答案 4 :(得分：0)
使用javascript的可能解决方案：您可以添加一个属性来查找所有字段，并通过ajax发送表单：
[xiaobai@xiaobai cogl]$ pkg-config --cflags --libs cogl-[Press Tab]
cogl-1.0 cogl-pango-1.0 cogl-path-2.0-experimental
cogl-2.0-experimental cogl-pango-2.0-experimental
cogl-gl-1.0 cogl-path-1.0
[xiaobai@xiaobai cogl]$
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>