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

试试这个..使用.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.) 我只是将模板行存储到一个单独的带有 display: none 的 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>

Answer 2

我可能建议您首先将 cand_no 更改为下拉菜单，否则您将必须验证输入是数字而不是文本。

然后我会添加 50 个版本的表格（确认，使用 div？），渐进式 ID 为 1-50。默认情况下对它们全部应用display:hidden，然后有一个从1 到cand_no 的javascript 循环将显示更改为阻止。