下面给出的 JS Fiddle 是我创建的一个表单。我需要提交它并希望它在 MySQL 中输出，但是当我按下提交按钮时，它只提交最后一个表单，即 form2。我需要一个关于如何通过一个提交按钮提交 3 个表单的解决方案，我在表单中运行了一些 JavaScript。我什至tried this method但它不适合我。
我尝试在我的输入元素上使用 HTML5 form 属性，我什至尝试将我的表单更改为仅一种形式，甚至尝试通过在同一表单中正确关闭 td th 和 table 标签来结束事情但它导致了两个问题。首先是当我选中选择所有复选框时，它既没有选中也没有取消选择，其次是当我点击尺寸部分下的任何复选框时它没有出现数量文本框。
我的表单代码如下:
//select all checkbox script
checked = false;
function checkedAll(frm1) {
var aa = document.getElementById('frm1');
if (checked == false) {
checked = true
} else {
checked = false
}
for (var i = 0; i < aa.elements.length; i++) {
aa.elements[i].checked = checked;
}
}
//only numeric term script
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
function isNumberKeyspecial(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
//form reset
CZBanglesreset = function() {
document.getElementById("form1").reset();
document.form1.twopointtwosizeqty.disabled = true;
document.form1.twopointfoursizeqty.disabled = true;
document.form1.twopointsixsizeqty.disabled = true;
document.form1.twopointeightsizeqty.disabled = true;
document.form1.twopointtensizeqty.disabled = true;
document.getElementById("frm1").reset();
document.getElementById("form2").reset();
}
//oncheck quantity
function codename() {
if (document.form1.twopointtwosize.checked) {
document.form1.twopointtwosizeqty.disabled = false;
} else {
document.form1.twopointtwosizeqty.disabled = true;
}
if (document.form1.twopointfoursize.checked) {
document.form1.twopointfoursizeqty.disabled = false;
} else {
document.form1.twopointfoursizeqty.disabled = true;
}
if (document.form1.twopointsixsize.checked) {
document.form1.twopointsixsizeqty.disabled = false;
} else {
document.form1.twopointsixsizeqty.disabled = true;
}
if (document.form1.twopointeightsize.checked) {
document.form1.twopointeightsizeqty.disabled = false;
} else {
document.form1.twopointeightsizeqty.disabled = true;
}
if (document.form1.twopointtensize.checked) {
document.form1.twopointtensizeqty.disabled = false;
} else {
document.form1.twopointtensizeqty.disabled = true;
}
}body {
background-image: url(../header_bg.jpg);
background-size: cover;
}
textarea {
resize: none;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=radio] {
cursor: pointer;
}
b {
cursor: default;
}
th {
cursor: default;
}
td {
cursor: default;
}
input[type=text] {
cursor: cell;
}
textarea {
cursor: cell;
}
input[type="reset"] {
width: 10em;
height: 2em;
border: none;
background: transparent;
font-weight: bold;
cursor: pointer;
}
input[disabled] {
background: transparent;
border: none;
cursor: default;
}
input:disabled::-webkit-input-placeholder {
/* WebKit browsers */
color: #fff;
}
input:disabled:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff;
}
input:disabled::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fff;
}
input:disabled:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #fff;
}<body>
<form action="" method="POST" enctype="multipart/form-data" id="form1" name="form1">
<table border="2" style="box-shadow: 20px 20px 10px #000000; background-color: white;" align="center">
<tr>
<th>
<p align="Left">Name : <sup><font color="red">*</font></sup>
</p>
</th>
<td>
<input type="text" name="product_name" placeholder="Product Name" size="59" title="Enter the name of the product">
</td>
</tr>
<tr>
<th>
<p align="Left">Description : <sup><font color="red">*</font></sup>
</p>
</th>
<td>
<table border="0">
<textarea name="product_desc" placeholder="Product Description" maxlength="300" rows="6" cols="61" title="Enter the Description of the product"></textarea>
</td>
</table>
</tr>
<tr>
<th>
<p align="Left">Size & Weight<sup><font color="red">*</font></sup>
</p>
</th>
<th>
<table border="1">
<td title="Size 2.2">
<label>
<input type="checkbox" name="twopointtwosize" value="2.2size" title="Size 2.2" onClick="codename()">2.2
<br>
<input name="twopointtwosizeqty" type="text" disabled onKeyPress="return isNumberKey(event)" size="2" placeholder="QTY" maxlength="5">
</label>
</td>
<td title="Size 2.4">
<label>
<input type="checkbox" name="twopointfoursize" value="2.4size" title="Size 2.4" onClick="codename()">2.4
<br>
<input type="text" size="2" name="twopointfoursizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" maxlength="5" disabled>
</label>
</td>
<td title="Size 2.6">
<label>
<input type="checkbox" name="twopointsixsize" value="2.6size" title="Size 2.6" onClick="codename()">2.6
<br>
<input type="text" size="2" name="twopointsixsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td title="Size 2.8">
<label>
<input type="checkbox" name="twopointeightsize" value="2.8size" title="Size 2.8" onClick="codename()">2.8
<br>
<input type="text" size="2" name="twopointeightsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td title="Size 2.10">
<label>
<input type="checkbox" name="twopointtensize" value="2.10size" title="Size 2.10" onClick="codename()">2.10
<br>
<input type="text" size="3" name="twopointtensizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td style="border-style: none;">
<input type="text" placeholder="Weight" name="weight" size="8" maxlength="8" title="Enter the weight in Grams" onKeyPress="return isNumberKey(event)" style="height: 45px;">
</td>
</th>
</table>
</tr>
<tr>
<th>
<p align="Left">Color : <sup><font color="red">*</font></sup>
</p>
</th>
<td>
</form>
<form id="frm1">
<table>
<td title="White Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White" title="White Colour" value="white"><b title="White Colour">White</b>
</label>
</td>
<td title="White/Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White/Red" title="White/Red Colour" value="w/r"><b title="White/Red Colour">W/R</b>
</label>
</td>
<td title="White/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White/Green" title="White/Green Colour" value="w/g"><b title="White/Green Colour">W/G</b>
</label>
</td>
<td title="White/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White/Blue" title="White/Blue Colour" value="w/b"><b title="White/Blue Colour">W/B</b>
</label>
</td>
</tr>
<tr>
<td title="Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red" title="Red Colour" value="red"><b title="Red Colour">Red</b>
</label>
</td>
<td title="Red/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red/Green" title="Red/Green Colour" value="r/g"><b title="Red/Green Colour">R/G</b>
</label>
</td>
<td title="Red/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red/Blue" title="Red/Blue Colour" value="r/b"><b title="Red/Blue Colour">R/B</b>
</label>
</td>
</tr>
<tr>
<td title="Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Green" title="Green Colour" value="green"><b title="Green Colour">Green</b>
</label>
</td>
<td title="Green/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Green/Blue" title="Green/Blue Colour" value="g/b"><b title="Green/Blue Colour">G/B</b>
</label>
</td>
<tr>
<td title="Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Blue" title="Blue Colour" value="blue"><b title="Blue Colour">Blue</b>
</label>
</td>
<tr>
<td title="Multi Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="multicolor" title="Multi Colour" value="multicolor"><b title="Multi Colour">MultiColour</b>
</label>
</td>
</form>
<td title="Select All" align="right" style="border-style: none;">
<input type="checkbox" name="checkall" title="Select All" onclick='checkedAll(frm1);'>
</td>
<td style="border-style: none;"><b title="Select All">All</b>
<form action="" method="POST" enctype="multipart/form-data" id="form2">
</td>
</table>
</td>
</tr>
</td>
</tr>
<tr>
<th>
<p align="Left">Price : <sup><font color="red">*</font></sup>
</p>
</th>
<td>
<table border="1">
<td>
<input type="text" name="product_price" placeholder="Original" size="21" title="Enter The Original Price Of The Product" onkeypress="return isNumberKey(event)">
<td>
<input type="text" name="product_special_price" placeholder="Special" size="21" title="Enter The Special Price Of The Product (not necessary)" onkeypress="return isNumberKeyspecial(event)">
</td>
</td>
</tr>
</table>
<tr>
<th title="Special Price Validity Dates;(note it is valid only if entered special price)">
<p align="Left">Special Date : <sup><font color="red">*</font></sup>
</p>
</th>
<td title="Special Price Validity Dates;(note it is valid only if entered special price)">
<table border="0">
<tr>
<th title="Special Price Validity Starting Date">Start Date:</th>
<td>
<input type="date" name="startingdate" min="2015-02-01">
<br>
</td>
</tr>
<tr>
<th title="Special Price Validity Ending Date">End Date:</th>
<td>
<input type="date" name="endingdate" min="2015-02-01">
<br>
</td>
</tr>
<tr>
<th>
<font color="white" size="0">Hello</font>
</th>
</tr>
<tr>
<th>
<font color="white" size="0">Hello</font>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<th title="Status(Should the Product be visible to the customers)">
<p align="Left">Status : <sup><font color="red">*</font></sup>
</p>
</th>
<th>
<label>Enable :
<input type="radio" name="status" value="enable" title="Enable The Status">
</label>
<label>Disable :
<input type="radio" name="status" value="disable" title="Disable The Status">
</label>
</th>
</tr>
<tr>
<th title="Tax Class(which type of tax should be applied on the product)">
<p align="Left">Tax Class : <sup><font color="red">*</font></sup>
</p>
</th>
<th>
<label>Taxable :
<input type="radio" name="tax" value="taxable" title="Taxable Goods">
</label>
<label>Shipping :
<input type="radio" name="tax" value="shipping" title="Shipping">
</label>
 
<label>None :
<input type="radio" name="tax" value="None" title="None from both on the left">
</label>
</th>
</tr>
<tr>
<th>
<input type="reset" name="reset" value="Reset" onclick="CZBanglesreset();" title="Reset All The Details">
</th>
<th>
<input type="submit" name="submit" value="Add Product" title="Add Product To The Inventory" style=" width: 33em;height: 2em;
border:none;
background: transparent;
font-weight:bold;
cursor:pointer;">
</th>
</tr>
</table>
</form>
</body>最佳答案
首先，您有重叠标签:您的 form1 在 td 内结束，这是不可能的。如果查看 DOM 结构，frm1 完全嵌套在 form1 中。不过，这不是真正的问题。
当您尝试同时提交 3 个表单时，前两个提交被中止，只有第三个通过。唯一的方法是异步地使用 AJAX 调用。
关于javascript - 三个表单一键提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29943102/