JavaScript Tutorial - Creating a Form Dynamically

If you don't like my select, you can delete it by pressing the button above.

Disable Buttons

At the start, the "Delete Form" button is disabled, because there isn't a form to delete, so it would cause an error. After clicking the "Create Form" button, it becomes disabled, although multiple clicks would simply add more forms to the page.

Form Contents

The form contains a select, which has items with text and values. When selected, the select will send you to a page. There is also a button which is there for show only, but when clicked shows an alert. So the form has the essential elements, including event handling capacity.

Creating the Form

First we locate the paragraph, which is where we want to position the form. Then we create the form and the select. The next thing I do is to create the onClick event for the select.

mypara=document.getElementById("paraID");

myform=document.createElement("form");

myselect = document.createElement("select");

//one way to write a function... you have to write it yourself!

myOnChange = new Function("e", "location.href=myselect.options[myselect.selectedIndex].value");

Now I have the basic elements and I can create the options. The first option does not have a value, so I'll add the second item below:

//second option

theOption=document.createElement("OPTION");

theText=document.createTextNode("JavaScript Tutorial II");

theOption.appendChild(theText);

//this option has a value, an URL, so we set the value

theOption.setAttribute("value","index.html");

myselect.appendChild(theOption);

So, above, I create the OPTION first. Then some text, using createTextNode, and append it to the OPTION. Then I use setAttribute to set the value of the OPTION, and append this to the OPTION.

When I have created all the options I need, then I begin to build up the form:

myform.appendChild(myselect);

mypara.appendChild(myform);

// the myOnChange(e) function, created earlier, is used to set

//the "onchange" event (Yes, onchange, not onChange!)

myselect.onchange=myOnChange;

I add the select to the form, and the form to my marker, the paragaraph. Lastly, I add the "onchange" event to the select, using the function I created earlier. I have now created the select.

Even though I have made the form, I can make some changes, such as the following, using style or setAttribute:

The style attributes are a throwback from some code to create a table, so some of them, for instance, border, do not work, but do not create errors.

myselect.setAttribute("bgColor","red");

myselect.style.color="green";

myselect.setAttribute("border","10px");

myselect.style.fontWeight="bold";

//I need to set the IDs because I want to

// to reference then so I can delete the form later

myselect.setAttribute("id","selectID");

myform.setAttribute("id","formID");

The most important things about the above are setting the IDs, so I can get a handle on the select later. The second function is to delete the form:

function deleteForm() {

//here I use the IDs set in the create to get a handle on the elements

myPara=document.getElementById("paraID");

myform=document.getElementById("formID");

//so I can remove them:-)

myPara.removeChild(myform);

}//end of deleteForm()

I remove the form using removeChild, after I have used the IDs to find it.

Creating Functions

I used two ways to create functions, either could replace the other:

myOnChange = new Function("e", "location.href=myselect.options[myselect.selectedIndex].value");

And, the second function:

function myOnClick(e) {

alert('Hello');

}

Normally, I would have used one way or the other, had I not wished to demonstrate the two methods.

Setting text and values in the Options

I used two ways to set the values and options in the code. The first is:

theText=document.createTextNode("JavaScript Tutorial II");

theOption.appendChild(theText);

//this option has a value, an URL, so we set the value

theOption.setAttribute("value","index.html");

The second way was:

theOption.value="modifyingExistingText.htm";

//set the text using the innerHTML property instead of adding text node

theOption.innerHTML="Modifying Existing Text";

Naturally, I would normally have been satisfied with either.

Creating a New Paragraph

I created a new paragraph to put the button on a new line:

mybreak=document.createElement("p");

myform.appendChild(mybreak);

The new paragraph was added to the form before I added the button.

Creating the Button

The button was created as follow:

mybutton=document.createElement("BUTTON");

//the function here for the button is different from before, to illustrate another

//way to create a function

function myOnClick(e) {

alert('Hello');

}

//once again, "onclick" not "onClick"

mybutton.onclick=myOnClick;

Setting the Button Value and Size

For IE, it wasn't necessary to set the size, and the value could be simply set, however Netscape wanted the following:

//setting the height and width isn't essential for IE, but is essential for Netscape

mybutton.style.height=20;

mybutton.style.width=75;

//assign the value of the button

theText=document.createTextNode("Click Me");

mybutton.appendChild(theText);

//the code commented out below works fine for IE, but the above code is needed for

//some other browsers and IE likes it too!

//mybutton.value="Click Me";

myform.appendChild(mybutton);

Summary

So, we create some parents and then some children, which we give appropriate properties, values, etc. Then we systematically add the children to their parents, and the parents to their grand parents, etc.

See the Code Page for more details