One of the top searches online by web designer and developers is dynamic content and CMS engines.
Well, i have a secret to share : You no longer have to search for cool and unique solutions, just get familiar with the term “JQuery” and “Bootstrap” and you are good to go.
I will not cover JQuery and Bootstrap here, because these are huge subjects, and there are lots of resources and articles about them everywhere, and i am here to give you solutions wrapped with the highest and most reliable frameworks. So if you wish to dig further, you are invited to read all about JQuery and Boostrap on your spare time…
In the next few lines i will give you the power to make your forms dynamic by adding fields to it and have the ability to save the content with no effort at all, as if you were doing this all your life.
First, you need to get your HTML know JQuey, and there is a great Google resource for that, so just include the next line in your head block and you are good to go :
Notice that Google gives you the latest version of JQuery resources, in this example, the latest version is 1.10.2, so we include this in our head.
One more thing, we use the min version of the JS script, and not the full responsive one.
you are better using the .min in your scripts as Google are checking on page loading times. Having all your JS file minified means they will load faster.
Now, we need to add our
addField.js script to the HTML head :
We are good to go and add the “brains” to the form.
Before we add the code to the HTML block, lets go over some insights regarding the JS script we added.
We need to configure some constants to the JS script so it will identify the container and logic functions on the HTML block.
var mainFieldsDivId = "fieldContainer";
This is the id of the
div that will contain all the dynamically added fields.
var addFieldButtonId = "addFieldBtn";
This is the is of the “add
button” that will add new field to the main container.
var hiddenFieldCounterId = "fieldCount";
For the script to know how many fields added (and rearrange fields on delete) we have an hidden counter. This is the counter’s id.
var fieldLabelId = "fieldId";
for each new field added, we give a constant name followed by its index (The number of field added). So, if we added the fifth field, its name will be “fieldId-5”.
var fieldLabelText = "Field";
For each field added, we generate a label with the text in this variable followed by the field index (The number of field added). So, if we added the fifth field, its label text will be “field #5”.
This is the configuration for the script, now we will go over the script’s functionality.
As you might noticed, the script is a JQuery object, launched on the buttons click event. Which button, you ask? The button with the ID configured earlier (The
Lets go back to the HTML body block and add the HTML elements. We will add a simple
div that will act as our fields container and in it we will put a button and an hidden counter, setting its initial value to 1.
div‘s ID is the same id we configured earlier in the JS file under the
The button ID is the same id we configured earlier in the JS file under the
The hidden counter ID is the same id we configured earlier in the JS file under the
When clicking the “add” button, The JS shoots the click event, and launches an inner function
buildFldGroup which will add a label, text field and a delete button to the container
The first click will generate this :
Now lets look at the
buildFldGroup function closer…
The function expects 2 parameters :
- intId = The id of the added field group.
- value = The initial value of the text field. This is optional and most of the time this will be empty. Don’t be afraid, the first line will take care of this for you.
The function will build a new inner
div for each field group and add the fields to it.
Notice that the delete button will get a click event handler.
This is crucial, because when click the delete button of for any of the fields, this will remove the field group, reduce 1 from the hidden counter and call another function called
rearrangeFields got its own header, and for a good reason too.
When deleting a field group, we want the indexes to be accurate, but we also want the field groups to be arranged.
So, if we delete field group 5, and we had 7 field groups added to our form, we want field group 5 to be deleted, field group 6 to become field group 5, and field group 7 to become field group 6…
Complicated? No really.
rearrangeFields function is called from the delete button event, passing it the removed field index.
The function will go go over the field group greater than the index given and replace them with new field groups according to the field group’s new location in the hierarchy…
This is it! You can download the script and see for yourself how easy and fun this is.
Oh, You can see a live demo on Youtube now :