How to generate form fields using javascript

In this tutorial I’m going to show you how you can generate form fields using javascript and jquery.
This is useful when you need to conserve space on your form and you only want to show the optional fields if the user needs it.

Requirements


Procedure

Yeah, I  guess I’ll just call this portion ‘procedure’ from now on. You might have notice the inconsistency if you’re a regular reader of my blog.

First, I need you to setup your folder structure. You must know how to link your jquery core file. If its just inside the same folder as the file that we are building right now then it might look something like this:

<script type="text/javascript" src="jq.js">
</script>

 

Means

Second, let’s build the form elements which will serve as a way to create the dynamically generated form fields. For this tutorial, we will be using a button.

<input type="button" id="glink" value="generate link"/>
<input type="button" id="gtext" value="generate textbox"/>
<input type="button" id="gradio" value="generate radio"/>

In the sample code above. I have 3 buttons. One that generates a link, the other generates a text field, and the last one generates a radio button. As you can see from the values.

Parent

Third, let’s build another set of form elements. This will serve as the parent for the form elements which will be generated:

<div id="link_div"></div>
<div id="text_div"></div>
<div id="radio_div"></div>

 

Analogy

In real world (yeah, I guess this is my first time doing an analogy), a child needs a parent in order to be born or exist. They can’t just pop out of nowhere. They need someone to bring them into this world. And so are form elements. In the sample above, there is a separate parent element for links, text fields , and radio buttons. So that they won’t just scatter everywhere in the page once they’re created.

 

Housekeeping

Fourth, let’s go back to jquery and javascript. I’m talking about the code which we are going to put inside the <script></script> tags. If you don’t already have that, then I think its time you type it on your text-editor. Then do the housekeeping:

$(function(){

    var num = 0;
    var num2 = 0;
    var num3 = 0;

});

If you’re a psychic or someone who has mental powers. Then you might now what those 3 variables are for. If not, then here’s my answer since I’m no good at naming things: variables num, num2 , and num3 will be used as an index to keep track of how many links, textboxes, or radio buttons are generated. They will also serve as the id attribute for each element. If this is not clear to you, then you’ll see what I mean once you see the output.

 

Functions

Fifth, let’s now create the functions that will be performed when users click on each of the buttons that we created a while ago. Prepare yourself because here’s a big chunk of code:

$('#glink').click(function(){

    var link = document.createElement('a');
    link.setAttribute('href', 'mypage.htm');
    link.setAttribute('id', 'link' + num);

    document.getElementById('link_div').appendChild(link);
    document.getElementById("link + num).innerHTML = "spanner" + num + "<br/>";
    num++;

});

On the first line, we declared a function which will be called if the user clicks on the button with an id attribute of glink (glink for generating link). Then we declared a variable called link, which will hold the value returned by the create element javascript function. Create element takes up 1 argument, and that is the actual html element that you want to create. In the code above, were trying to create an anchor element (link). If you want to create an image you do it this way:

document.createElement('img');

As you can see, its not just for form elements. You can use the create element function to create any html element which can be seen.

Next, we set the attributes for the newly created form. Since it’s a link, it needs an href attribute which will contain the actual link (like this: http://google.com). And also an id attribute, which will differentiate it from the rest of the links that will be generated. And to make the id as unique as possible, I added the num variable. Which will be incremented every time we generate a new link to the page.

link.setAttribute('href', 'mypage.htm');
link.setAttribute('id', 'link' + num);

Then we append it to its parent element. Which is the div element with the id attribute of link_div:

document.getElementById('link_div').appendChild(link);

Lastly, we try to give it a form. So that we can see that its actually there:

document.getElementById("bolok" + num).innerHTML = "spanner" + num + "<br/>";

And don’t forget the code which makes the unique id thing possible:

num++;

 

Conclusion

I guess one example should do. Just check out the files that I used in this tutorial in the files section of this blog. If you want to see the code for the textbox and radio button generation.

One thought on “How to generate form fields using javascript

  1. Pingback: Generating form elements using jquery « Data Integrated Entity

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s