如何根据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>