MWD1001 Website Production Using JavaScript with Forms.

Using JavaScript with Forms

Topics

JavaScript Basics JavaScript and Forms Dreamweaver Implementation Custom Functions

Basics

JavaScript is an interpreted language which follows C-style syntax

Code can be embedded in web pages or linked from other files

Object-Oriented style – usually event-driven– Mouse over and mouse click events– Form submissions– Page Opening events

Careful!

JavaScript is not Java! Variables are not typed

– Always check user inputs Code can be seen by visitors to web

page Browser compatibility issues

Implementation

Adding JavaScript to pages

JavaScript code goes in <script></script> tags:

<script language="javascript"></script>

Locations

Typically add code to the <HEAD> of the web page

Can also use separate file:<script language="JavaScript" src="file.js">

Tend to use functions to contain JavaScript code

Need a mechanism to call the functions

Calling functions

HTML tags can trigger JavaScript events:

<a href="#" onMouseOver="hello('Fred')">

<input type="button" value="Click Me" onClick="hello('fred')">

Different events are valid for different tags – a longer list is on Moodle

Web Forms

Validation

Common use of JavaScript is to ensure required fields of a form have been filled in

Can go further and insist field contents follow set pattern – eg Post Code or email address

Test the contents of specified form fields to verify their contents

Implementation

Use the onSubmit parameter of a form tag to trigger JavaScript event

Call a function to validate form and return either true or false

e.g. <form onSubmit="return validate( )" ...

Browser will only submit form when a return value of true received

Variable Names

Important to give each form a unique name parameter– Assume a form called addrForm– Assume textbox called firstName

Can refer to value typed into the first name text box as:– document.addrForm.firstName.value

Sample check

Function checkForm( ) {first =

document.addrForm.firstName.value; if ((first == null) || (first == ""))

then {alert("Please enter first name");return false;

} return true;

}

Further Checks

May want to check other field more closely– Email address must contain @ sign

Use JavaScript built-in indexOf() function

Returns position of @ character in string or -1 if not found

if (email.indexOf('@') < 0) then {

Basic validation

Build a series of If statements to check whether fields are missing or invalid

Return false if a field is missing Have a final return true if all tests

passed

Other form fields

Radio buttons and check boxes will have a value if selected and null if not

<SELECT> dropdowns are more complex Treated as an array – so we need an

array index s = document.frm.selectBox;

val = s.options[s.selectedIndex].value; Rarely need to validate drop-down

menus

Using Dreamweaver

Canned JavaScript

Dreamweaver allows you to add built-in JavaScript functions to your pages– Click on a form– Open the behaviors tab– Click on the +– Pick Validate Form– Choose the fields you need

Dreamweaver Functions

The canned functions in Dreamweaver are generic

In many cases they are good enough Code is much more involved than the

simple examples you have seen so far

May find the error messages are not friendly enough

Custom Functions

Patterns in Data Fields

What is a valid email address? What is a valid UK postcode? What is a valid credit card number? Can obtain JavaScript functions from

the Internet to validate these data types

Validating Credit Cards

Credit card numbers are generated according to a mathematical algorithm

Can be checked for validity using the Luhn algorithm– Starting from the right-hand side – double

the second (and alternate) digits– If number > 10, add two digits together– Add all numbers (doubled and not)

together– Should be a multiple of 10

MWD1001 Website Production Using JavaScript with Forms.

Documents

dreamweaver slide

value slide

moodle slide

javascript events

builtin javascript functions

pages javascript code

canned functions

form tag