JavaScript:Forms

Overview
To invoke JavaScript activity from a form we usually use a button to call a function



We can add JavaScript interaction to any form element using one of the following:  Within JavaScript we can refer to any form element and assign the value of them to variables which we can use within our code

Example (js2_01)

 * Note: The css .lbl is used to space out the labels.
 * Warning** IE has another (feature) - you need to leave a space between the onClick string and "/&gt;"

Example js2_01

Example (js2_02)


Example js2_02

select (js2_03)


Example js2_03

Radio button (js2_04)


Example js2_04

Check box (js2_05)
Example :.

Summary (js2_06)


Note: Use of disabled means the text boxes cannot be changed by a user

Example js2_06

Validating and displaying a different background if an error
Note: this has been added by a user and needs a little tidying up :)

In an html document, create a form ( call 'Form1' )

The forms action is to post the information entered in the form to 'someone@somewhere.co.nz' and create a message to let the user know this action is happening



Within the form;

Create a text box (called 'Name1') to be filled in (Lists are used to create this form but other methods can be used).

Include a trigger to call the JavaScript (onblur="fnNameOK) within the html code.

Create a location (called 'ErrorName') for the error message to appear.



The CSS looks like this



The form should look something like this



Create a JavaScript form

Set up a variable called 'errorOne' that contains the text you want to display



Set up a variable to check for letters only (or change the * to a + to check for letters and gaps if desired (Both are shown))



Next set up the 'fnNameOK'



The form should look something like this when no data or incorrect data has been entered and the cursor changes focus away from the text box



Note: The lines of code 'document.Form1.Name1' and 'document.getElementById("Name1")' often acheive similar results.