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!

I would try creating a blank div and append a group of form fields using a for loop based on the number the user entered. — djphinesse, Oct 30 '12 at 18:41
Yes, it can be done with JavaScript, but it would be great to see how far you've come with that code. Otherwise looks like you're just giving instructions for someone to build that for you. Welcome to SO. — Roko C. Buljan, Oct 30 '12 at 18:41
Related: https://stackoverflow.com/questions/14853779/adding-input-elements-dynamically-to-form — TylerH, Mar 22 '21 at 17:58

Sushanth -- · Answer 1 · 2012-10-31T15:17:35.280

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>

I would appreciate if you could explain the "for" loop area. first, where does the ID #studentTable come into the form..? Secondly, the variable $cloned, how does it generate the candidate fields into the form..? Thirdly, where does the template row reside..? kindly understand, my knowledge of javascript is little...Thanks — Sms, Oct 31 '12 at 07:58
I am just storing the template row into a separate div .. see edit — Sushanth --, Oct 31 '12 at 15:13
Words cant explain how grateful I'm with your swift response to my questions..Thanks a bunch!...Yet, i've tried the jscript you have above along side the html code for the template but the page just keeps reloading after calling the onchange function... Lest i forget, the div for the template class and the input field for the "cand_no" are all in a form....Could that be the problem? — Sms, Oct 31 '12 at 18:17
Is the form being submitted by any chance when the change event is triggered — Sushanth --, Oct 31 '12 at 19:26
Yes the form is being submitted with this --- onchange='this.form.submit()' --- in the "cand_no" field...could that be the problem? — Sms, Nov 01 '12 at 09:55

score 0 · Answer 2 · edited Oct 31 '12 at 15:21

0

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.

edited Oct 31 '12 at 15:21

Filip Roséen - refp

62,493
20
150
196

answered Oct 30 '12 at 18:43

Robert

77
1
14

I think your idea of having a drop down would be very good and then running a loop to generate the candidate field. But i have little knowledge of javascript..Would appreciate if you could help out...Thanks – Sms Oct 31 '12 at 08:23
There are 2 assumptions to make this work. 1. You create a select menu with an id cand_no 2. You surround the necessary candidate registration fields with let's say divs and make those divs have ids of cand_no1, cand_no2 etc. Then you can should be able to use something like this: `$('#cand_no').on('change', function(e) { var cand_no = e.target.options[e.target.selectedIndex].value; for(var i=0; i < cand_no; i++) { $('div#cand_no'+i).show); } });` – Robert Nov 05 '12 at 15:46

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

2 Answers2