1. Technology

Dynamic JavaScript Forms Tutorial

By

1 of 5

Page One

JavaScript is a proper object oriented programming language but many people writing JavaScript do not use it that way. There are also lots of people who do not use the standard Document Object Model commands to update the content of their web page the way that the standards say you are supposed to do your page updates, preferring instead to use the non-standard innerHTML command (which the more popular browsers support) or worse yet using document.write() calls.

The reason why few people make use of the full power of JavaScript is that they never learnt how to use those features. In this tutorial we are going to plug a couple of those holes by actually showing you how to write some JavaScript that both makes use of the full object oriented capability of JavaScript and which also demonstrates how to properly use the correct DOM calls to update your web page. The way we are going to do this is to work our way line by line through the code in my Dynamic JavaScript Forms script so that you ca nsee exactly how we can create our own Javacript object and use it to dynamically add forms into a web page.


function Form(a, m, e, txt) {

The way that you define an object starts out the same as the way you define a function. What will make this an object rather than a function is the way that we will call this code after we finish defining the object.


this.F = document.createElement("form");

Within an object definition we can refer to the object itself using the this keyword where the current object will automatically be substituted. With this statement we are defining a property for our Form object named F and effectively assigning it the value <form></form> (since that's what the HTML that will be generated will look like when we add this content into a web page.


this.F.action = a;
this.F.method = m;
if (e != '') this.F.enctype = e;

A form tag needs to have some attributes so here we add the values for the method, post and enctype attributes (if there is one) into the form tag we just created.


this.fld = document.createElement("fieldset");
var t = document.createTextNode(txt);
var l = document.createElement("legend");
l.appendChild(t);
this.fld.appendChild(l);
}

It is time to start adding some content into our form. Since the standards require that any form fields be wrapped inside something else and can't be placed directly inside the form tag. The obvious tags to use to wrap around our form content is a fieldset since that will enable us to place a border around our form to separate it from the rest of the page. The legend tag will allow us to provide a name for our form embedded into that border.

The first line here creates a new property within our Form object called fld to hold the fieldset. The second statement creates a text node to hold the text for our legend. The third statement creates the legend tag and the fourth attaches the textnode into it. The fifth statement attaches the legend into the front of the fieldset.

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Dynamic JavaScript Forms Tutorial - page one

©2014 About.com. All rights reserved.