如何根據javascript中的用戶輸入動態生成輸入字段

Question

我正在創建一個課程註冊表單，要求用戶輸入任何期望數量的將從他或她的公司參加課程的候選人。

例如： 如果用戶在名爲「No of Candidates」的字段中輸入3，該腳本應生成3行，其中包含「Name」，「Email」，「Phone」，「Sex」和「Position」爲每個候選人的信息。

請在下面找到「候選編號」字段的html以及用於輸入每個候選人信息的字段。

請注意：要生成的字段基於用戶的輸入。即它可以是3，5，10 e.t.c

<p> 
<label><strong>No of Candidates</strong></label> 
<label><input name="cand_no" type="text" placeholder="Type Your Number of Candidates" onchange='this.form.submit()' /></label> 
    <div class="clear"></div> 
</p> 



    <div class="cand_fields"> 
    <table width="630" border="0"> 
     <tr> 
     <td>Name</td> 
     <td width="20">Sex</td> 
     <td>Email</td> 
     <td>Phone</td> 
     <td width="40">Position</td> 
     </tr> 
     <tr> 
     <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td> 
     <td> 
     <select name="cand_sex" required="required"> 
     <option value=" "> </option> 
     <option value="Male">Male</option>  
     <option value="Female">Female</option> 
     </select> 
     </td> 
     <td><input name="cand_email" type="text" placeholder="Email" required="required" /></td> 
     <td><input name="cand_phone" type="text" placeholder="Phone" required="required" /></td> 
     <td><input name="cand_pos" type="text" placeholder="Position" required="required" /></td> 
     </tr> 
    </table></div> 

我用PHP試過，但它是不愉快的從服務器端做這個。所以，我真的需要它從客戶端使用JavaScript來完成。

我會很感激，如果這個可以用JavaScript來實現......

萬分感謝！

Answer 1

我可能會建議您將cand_no更改爲下拉菜單，否則您將不得不驗證輸入是數字而不是文本。

然後，我會添加表格的50個版本（ack，使用divs？）和1到50的漸進ID。默認應用display:hidden，然後使用從1到cand_no的javascript循環將顯示更改爲阻止。

Answer 2

試試這個..使用.change()事件..

我創建了一個模板類保存模板行.. 然後使用.clone()插入行到表..

$('[name="cand_no"]').on('change', function() { 
    // Not checking for Invalid input 
    if (this.value != '') { 
     var val = parseInt(this.value, 10); 

     for (var i = 0; i < val; i++) { 
      // Clone the Template 
      var $cloned = $('.template tbody').clone(); 
      // For each Candidate append the template row 
      $('#studentTable tbody').append($cloned.html()); 
     } 
    } 
});​ 

Working Fiddle

編輯

1）我剛纔命名持有一個ID的學生信息，因此，這將是很容易的目標表..

2）克隆剛剛創建的副本了問題中的元素即模板。因此，對於在輸入中輸入的條目數量，我們編寫一個for循環並將模板行添加到學生表。

3.）我只是將模板行存儲到一個單獨的div與顯示：無，這樣它就不可見在屏幕上..這只是從它複製HTML並追加到新表。

<div class="template" style="display: none"> 
    <table> 
    <tr > 
     <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td> 
     <td> 
      <select name="cand_sex" required="required"> 
       <option value=" "> </option> 
       <option value="Male">Male</option> 
       <option value="Female">Female</option> 
      </select> 
     </td> 
     <td><input name="cand_email" type="text" placeholder="Email" required="required" /></td> 
     <td><input name="cand_phone" type="text" placeholder="Phone" required="required" /></td> 
     <td><input name="cand_pos" type="text" placeholder="Position" required="required" /></td> 
     </tr> 
    </table> 
</div>