Working with Forms in JavaScript

by Thomas Valentine

Learning to work with and understand the actions of a form is of paramount importance to the online developer. When you first started building your forms using HTML tags and attributes, it was an easy thing. Now it gets a bit more complicated. Using JavaScript to verify the data the user provides within your form is probably the most common use of JavaScript. You may verify that a correct postal or zip code was input by the user. You may send an alert when the user doesn't fill in their last name. These things used to be in the domain of CGI scripts, written most commonly in PERL, another of the scripted languages. This had the detritus effect of increasing server load. Increase server load and you get increased costs and complexity. Not good.

Since the creators of the standards for the Internet were professionals who realized this shortcoming, they created JavaScript, which runs on the users computer, decreasing server load. CGI scripts became more efficient and costs were lowered. JavaScript became an accepted standard, now with many versions and revisions. The great, bulky Mainframes were all but eliminated. Now let's get to it.

There are two ways of submitting the form data on your page to the server - the GET method, and the POST method. Each has its own advantages and each has its own shortcomings, as you will see.

The GET Method

http://www.walkthegeek.com/process.cgi?fieldOne=Accept

The above example shows form data being sent to the www.walkthegeek.com server. The data is to be handled by the CGI script entitled process.cgi. The form data is separated from the CGI script name by a question mark. The "fieldOne" entry after the question mark is the name of the HTML element that the user provided input to. The "accept" is the value the user has selected from the HTML element. The HTML code that would send this information would look like the following.

<FORM ACTION="http://www.walkthegeek.com/process.cgi" METHOD="GET">
  
     <SELECT NAME="fieldOne">
        <OPTION VALUE="Accept">I Accept</OPTION>
        <OPTION VALUE="Decline">I Do Not Accept</OPTION>
     </SELECT>
  
  <INPUT TYPE="button" VALUE="Submit">
  
  </FORM> 

In the above code, the FORM element has its ACTION and METHOD attributes set. If you leave out the ACTION attribute, nothing will happen - your form will not be processed. If you leave out the METHOD attribute, the browser will assume you want to use the GET method of form data submission. It is a good programming convention to use the METHOD attribute, even if you want to use the GET method. This prevents any confusion on the part of the browsers, as well as speeding things up - the browser won't have to make an informed decision, which takes time. Note also that there is an INPUT element of the "button" type. Recall from the HTML tutorials that in order for a form to be submitted, a button to tell the browser to submit the form must be in place. Last, all form elements must obviously be within the opening and closing HTML FORM tags.

The GET method is used when you don't have a lot of information to be sent to the server. The information to be sent to the server is readable by the informed Internet surfer because it appears as text within the address bar. If security isn't of primary importance, use the GET method. If security is required, it is recommended you use the POST method, which operates slightly different, as you will see.

Server Side JavaScript and File Manipulation
The JavaScript Chronicles
The POST Method

The JavaScript Chronicles