我正在创建一个添加到购物车程序，需要将产品与其属性(颜色，大小)添加到购物车中，为此我需要一起提交这两个表单。我不确定我在哪里出错了，我已经创建了脚本，但它只提交使用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>你可以尝试分配从二级表单的颜色输入到你的"主"表单。只要对任何输入使用<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 ...
});
表单是通过POST请求(或GET)发送的一组数据。你的要求毫无意义。如果有可能，你还是不应该这么做。无论HTML和CSS的问题是什么，我建议你把它作为你的实际问题。
提交一个表单，除非它有一个指向框架或其他窗口的目标属性，否则将导致HTTP请求一个新页面。
同时提交两个表单就像同时点击两个链接。这是不可能的。
你需要:
- 重构你的代码，使它使用一个单一的形式。这几乎肯定是最有意义的。
- 为页面添加一对框架，并将每个表单提交给不同的框架。
- 使用JavaScript收集第一个表单的数据，使用Ajax将其发送到服务器，然后(在获得响应后)提交第二个表单。
如果你想发送多个表单作为一个单一的我可以建议使用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);
使用javascript的一个可能的解决方案:您可以添加一个属性来定位所有字段，并通过ajax发送表单:
<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 */ }
});
});
});