Question

我已经尝试了几种方法来实现这一点，但似乎从来没有取得任何成功。我希望来自下面的javascript的innerHTML显示x次，基于下拉框中选择的值，然后将所有字段提交到另一个将插入到mysql中的php。当我尝试克隆HTML部分时，它只将最后一个克隆中的值发布到下一个表单。我希望所有的价值来自克隆＆＃34;克隆＆＃34;要发送的部分。任何帮助将不胜感激！

我有以下HTML：

<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>

使用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:&nbsp;<input type='text' name='cust_fname[]' class='form_f' required='required'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Last Name:&nbsp;<input type='text' name='cust_lname[]' class='form_f' required='required'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Weight (kg):&nbsp;<input type='text' name='cust_kg[]' class='form_a' required='required'/></td>
</tr>

<tr>
<td class='form_label'>Phone:&nbsp;<input type='text' name='cust_phone[]' class='form_g' required='required'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email:&nbsp;<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:&nbsp;<input type='text' name='cust_addr_num[]' class='form_a' />&nbsp;&nbsp;&nbsp;Street:&nbsp;<input type='text' name='cust_addr_street[]' class='form_b' />&nbsp;&nbsp;&nbsp;Suburb/Town:&nbsp;<input type='text' name='cust_addr_sub[]' class='form_f' /></td></tr>
<tr><td class='form_label'>State:&nbsp;<input type='text' name='cust_addr_state[]' class='form_b' />&nbsp;&nbsp;&nbsp;Postcode:&nbsp;<input type='text' name='cust_addr_post[]' class='form_a' />&nbsp;&nbsp;&nbsp;Country:&nbsp;<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++;*/
     }
}

JS Fiddle

Answer 1

我认为您必须将当前计数器值添加到表单标签的名称（因此它将是cust_phone [1]，cust_phone [2]等）。

Form input field names containing square brackets like field[index]

如何让表单字段动态乘法，然后通过post方法提交

1 个答案: