MWD1001 Website Production Using JavaScript with Forms.
Post on 01-Apr-2015
217 Views
Preview:
Transcript
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"><!--
function hello (name) {alert("Hello " + name);
}--></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
top related