how to dynamically generate input fields based on user input in javascript

Question

I'm creating a course registration form that requires user entering any desired number of candidates that will be taking the course from his or her company.

Example: If a user enters 3 into the field named "No of Candidates", the script should generate 3 rows with fields like "Name", "Email", "Phone", "Sex" and "Position" for each candidate's information.

Pls Find below the html for the "No of Candidate" field and Fields to be generated for user to enter each Candidate's information.

Pls Note: Fields to be generated is based on user's input. i.e it can be 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>

I've tried this with php but it isn't pleasant doing this from the server side. So, I really need it to be done from the client side using javascript.

I'll be very grateful if this can be achieved with javascript...

Thanks a million!

Answer 1

I might suggest that you start by changing cand_no to a dropdown, otherwise you will have to validate that the input is numeric rather than text.

Then I would add say 50 versions of the table (ack, use divs?) with progressive IDs from 1-50. Apply display:hidden to them all by default and then have a javascript loop going from 1 to cand_no that changes display to block.

Answer 2

Try this .. Using the .change() event..

I have created a template class that holds the template row .. Then using .clone() to insert the rows into table..

$('[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

EDIT

1.) I have just named the table which holds the student information with an ID so that it will be easy to target..

2.) Clone just create's a copy of the element in question i.e, template . So for the number of entries entered in the input , we write a for loop and append the template row to the student table.

3.) I am just storing the template row into a separate div with display: none so that it is not visible on the screen .. this is just to copy the HTML from it and append to the new table.

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