Javascript 如何让表单字段动态增加,然后通过post方法提交
我已经尝试了几种方法来实现这一点,但似乎从未取得任何成功。我希望下面javascript中的innerHTML根据下拉框中选择的值显示x次,然后将所有字段提交给另一个php,该php将插入mysql。当我尝试克隆HTML部分时,它只将上一个克隆中的值发布到下一个表单。我希望通过发送来自所有“克隆”部分的所有值。任何帮助都将不胜感激 我有以下HTML:Javascript 如何让表单字段动态增加,然后通过post方法提交,javascript,php,mysql,Javascript,Php,Mysql,我已经尝试了几种方法来实现这一点,但似乎从未取得任何成功。我希望下面javascript中的innerHTML根据下拉框中选择的值显示x次,然后将所有字段提交给另一个php,该php将插入mysql。当我尝试克隆HTML部分时,它只将上一个克隆中的值发布到下一个表单。我希望通过发送来自所有“克隆”部分的所有值。任何帮助都将不胜感激 我有以下HTML: <form action="?page=book_add" method="post" name="add_booking" id="boo
<form action="?page=book_add" method="post" name="add_booking" id="book" target="_self" enctype="multipart/form-data">
<center><table><tr><td class="form_label">Passengers</td><td valign="middle">
<select id="numpass" name="numpass" class="form_e"/>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td></tr></table></center>
<div id="repeat"></div>
<table width="100%"><tr><td></td><td style="text-align:right"><input type="submit" value="Add Booking" /></td></tr>
</table>
</form>
乘客
1.
2.
3.
4.
5.
6.
Javascript:
$(function(){
$("#numpass").change(addInput);
});
var counter = parseInt($("#numpass").val());
var limit = 7;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='form_head'>Passenger " + counter + " - Details</div>
<br />
<table width='100%' cellpadding='2' cellspacing='4'>
<tr>
<td class='form_label'>First Name: <input type='text' name='cust_fname[]' class='form_f' required='required'/> Last Name: <input type='text' name='cust_lname[]' class='form_f' required='required'/> Weight (kg): <input type='text' name='cust_kg[]' class='form_a' required='required'/></td>
</tr>
<tr>
<td class='form_label'>Phone: <input type='text' name='cust_phone[]' class='form_g' required='required'/> Email: <input type='text' name='cust_email[]' class='form_d' /></td>
</tr>
<tr>
<td>
<table width='100%' cellpadding='2' cellspacing='4'>
<tr><td class='form_label'>Address:</td></tr>
<tr>
<td class='form_label'>Number: <input type='text' name='cust_addr_num[]' class='form_a' /> Street: <input type='text' name='cust_addr_street[]' class='form_b' /> Suburb/Town: <input type='text' name='cust_addr_sub[]' class='form_f' /></td></tr>
<tr><td class='form_label'>State: <input type='text' name='cust_addr_state[]' class='form_b' /> Postcode: <input type='text' name='cust_addr_post[]' class='form_a' /> Country: <select class='form_c' name='cust_addr_country[]'>
<option value=''>--- Select Country ---</option>
<option value='Australia'>Australia</option></select></td></tr></table>
</td></tr></table>
<br />";
$(newdiv).appendTo("#repeat");
/*document.getElementById(divName).appendChild(newdiv);
counter++;*/
}
}
$(函数(){
$(“#numpass”)。更改(附加输入);
});
var counter=parseInt($(“#numpass”).val();
风险价值限额=7;
函数addInput(divName){
如果(计数器==限制){
警报(“您已达到添加“+计数器+”输入的极限”);
}
否则{
var newdiv=document.createElement('div');
newdiv.innerHTML=“乘客”+柜台+”-详细信息
姓名:姓氏:体重(kg):
电话:电邮:
地址:
编号:街道:郊区/城镇:
州:邮政编码:国家:
---选择国家---
澳大利亚
“;
$(newdiv).appendTo(“#repeat”);
/*document.getElementById(divName).appendChild(newdiv);
计数器++*/
}
}
我认为您必须将当前计数器值添加到表单标签的名称中(因此它将是cust_phone[1]、cust_phone[2]等)
否,
[]
字段在post上自动填充。您能为该问题创建一个新的解决方案吗?@code jaff-抱歉,上面添加了JS FIDLE,在加载时,您可以看到我的第一个问题,即它没有显示。。