Dynamically generate form fields using jQuery

A challenge one may encounter when building up an HTML form may be along the lines of "the user should be able to provide one to five inputs". The easiest solution would obviously be to have the user put all inputs into the same text field and i.e. separate them by commas. But there's no guarantee the user will follow these instructions, so you'll be left with a large amount of data validation, if you can even find a way to more or less reliably dissect the data.

A much more elegant solution is to provide a separate field for each input. Nothing too complicated either, but you probably don't want to clog up your form with a multitude of input fields which most users never will fill in.

With the jQuery plugin it is fairly easy to generate such fields dynamically, i.e. you can have a new field pop up every time the user focuses on one.

What you need to put into the HTML code area is the code for the first field. You should fit it with an id which has a numerical index in it that can be used to enumerate the fields. As you probably want to read out the data with PHP you also need to put a name, again with a numerical index. Beside that you need to add the event trigger, in my example this is the onfocus attribute:

newJobGroup() is the name of the jQuery function shown below. Using this we pass the input field to the function, that is necessary that the function, which is the same for all fields, knows where to insert the new field and what index to equip it with.

The input field can be surrounded by as many <div>'s as you want. Important is just, that you put an id onto the outermost div that should be generated for each field.

For the styling I used the Bootstrap classes, in many situations they make it very easy to make sure that the newly generated fields appear in the right spot.

Don't forget to include the <script> tags in your header to import the jQuery plugin and your custom JavaScript function!

Create a file named "createFields.js". In there the function "newJobGroup(Obj)" is created; the function that is executed each time the user clicks into the field that we want to duplicate.

The first thing done in the function is to get the index of the field that was clicked. As the id of my fields is formatted "jg-input-1", I can split the id by the dashes and thus get the index. As it should be incremented to get the next higher index you need to parse this substring as Integer value.

Next one needs to check whether the field that should be created may have already been created before. That is simply done by trying to get the field whose index is one higher than the clicked field. If the return value is null it does not exist yet and you can move on to creating it.

To determine where to insert the new field, the id of that element below which the new code should be inserted by JS is needed. In my case that is the id of the <div> surrounding the input field.

The index gained before can now be increased; it no longer represents the index of the clicked field, but the one of the field to be created.

Next up you need to basically copy the HTML code from your initial input field (plus probably the divs surrounding it) into JavaScript. Wherever an index appears however, the variable index needs to be put, outside of the HTML code. Make sure not to mix up single and double quotes here!

Finally the jQuery functionalities are used to generate a new code snippet from the HTML code string that was previously assembled, and ultimatively add the snippet at the desired point in the code.