1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blforms.htm

was emailed to:

Thanks for sharing About.com with others!

Dynamic JavaScript Forms

How to use the Form Object

More of this Feature

Get the Script

Create entire forms from JavaScript with my Form object. Using this object makes creating complete forms that can be easily styled extremely easy because each form field will have an appropriate adjacent label as well as its own id to allow you to easily style it from your stylesheet and validate it from the other javaScript on your page.

Before we actually get the FDorm object code though, let's take a look at how we would call it to create a form.

The first thing we'll need in creating a form from JavaScript is a form tag. To make our form content valid we'll also need to wrap all the form fields inside a container. The fieldset tag exists specifically for this purpose and so we'll use that along with a legend to supply our form with a name. To create these elements to add to our page we simply create a new Form object supplying it with the action, method, enctype, and legend text.

var f = new Form('next.php','post','','My Form');

Note that this creates the elements for us, it doesn't actually add it into the web page. We will leave adding it to the page until we have attached all the form fields that we want it to contain so that the form can appear on the page all in one go rather than one piece at a time.

The simplest fields that we can add to the form are hidden fields. To add a hidden field all we need to do is to specify the name/id we want the field to have and the value. Note that to make things easier the Form object gives all fields the same id as its name except for radio buttons where the ids have numeric suffixes to keep them unique.

f.addHidden('firsthide','one');

For most of the other input field types we can do as HTML does and use the same method to create the same input element. The first parameter we need to specify is the type we want our input field to be with a choice of 'text', 'radio', 'checkbox', 'submit', and 'button'. I have left out 'reset' because reset buttons are seldom used any more since they cause more problems than thewy solve. I have also left 'file' for a future update to the Form object as I haven't yet decided which way would be easiest to implement it. The second value we need to enter for this method is the label text follwed by the name/id,and the default value for the field. A final fierld contains r to make the field readonly, d to disable it, and c for checkboxes and radio buttons to set which is checked.

f.addInput('text','Your Name','yname','Steve','r');
f.addInput('radio','Male','sex','M','c');
f.addInput('radio','Female','sex','F','');
f.addInput('submit','','go','Go','');

Each of these creates both the form field itself plus a label for the form field which is positioned to the right of checkboxes and radio buttons and to the left of the other input fields. For the submit button where a label isn't needed we simply leave that parameter blank.

A textarea is another form field type that we may want to include into our form. For this field type we supply four parameters containing the label text, name/id, default content text, and 'r' or 'd' to make it readonly or disabled respectively. The other aspects of our textarea such as the width and height can be controlled from the stylesheet.

f.addTextarea('Message','mess','some text goes in here','');

The final form field we need to be able to add is a drop down select list. This is the most complex of the form field types we can add even though I have left implementing support for optgroups for a future time. We have five parameters needed to define our dropdown list. The first of these is the label text and the second is the name/id. The third parameter is the number of entries to display. Where this is not supplied or set to 1 and the list only allows one entry to be selected then a regular dropdown list will be displayed. Where this is greater than 1 then that number of entries from the list will be displayed with a scrollbar alongside to allow access to any others. The fourth parameter is where this object gets complicated because the fourth parameter is an array of all the options that you want to add to the select list and each option itself has an array to specify its own parameters. The final parameter for the select is again status flags with d to disable the selection list and m to indicate that multiple selections from the list can be made by holding down the CTRL key.

Coming back to those option arrays we have three entries in the array for each option. The first entry specifies the option text, the second the option value, and the third contains s if the option is to be selected by default.

f.addSelect('selection', 'mysel', 1, [['first choice - option one', 'oneone', ''], ['first choice - option two', 'onetwo', 's'], ['first choice - option three', 'onethree', ''], ['first choice - option four', 'onefour', '']], 'm');

The final step with all our form fields added (and you can of course add as many of each type as you need) is to attach the form into the web page. To do this we need an element that is already in the page that has an id so that we can specify that id in telling the Form object where to add the form.

f.addForm('myform');

So now that you have seen how to use my Form object to add forms to your web page dynamically with JavaScript, all you need to do now is to get the code for the Form object and link that into your page along with the code that you have written yourself based on the above examples in order to actually use it.

See More About

©2014 About.com. All rights reserved.