MWD1001 Website Production Using JavaScript with Forms

MWD1001 Website Production Topics  JavaScript Basics  JavaScript and Forms  Dreamweaver Implementation  Custom Functions

MWD1001 Website Production 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

MWD1001 Website Production 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

MWD1001 Website Production Implementation

MWD1001 Website Production Adding JavaScript to pages  JavaScript code goes in tags: 

MWD1001 Website Production Locations  Typically add code to the of the web page  Can also use separate file:  Tend to use functions to contain JavaScript code  Need a mechanism to call the functions

MWD1001 Website Production Calling functions  HTML tags can trigger JavaScript events:   Different events are valid for different tags – a longer list is on Moodle

MWD1001 Website Production Web Forms

MWD1001 Website Production 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 address  Test the contents of specified form fields to verify their contents

MWD1001 Website Production 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

MWD1001 Website Production 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

MWD1001 Website Production Sample check  Function checkForm( ) { first = document.addrForm.firstName.value;  if ((first == null) || (first == "")) then { alert("Please enter first name"); return false; }  return true; }

MWD1001 Website Production Further Checks  May want to check other field more closely – address must sign  Use JavaScript built-in indexOf() function  Returns position character in string or - 1 if not found  if < 0) then {

MWD1001 Website Production 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

MWD1001 Website Production Other form fields  Radio buttons and check boxes will have a value if selected and null if not  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

MWD1001 Website Production Using Dreamweaver

MWD1001 Website Production 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

MWD1001 Website Production 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

MWD1001 Website Production Custom Functions

MWD1001 Website Production Patterns in Data Fields  What is a valid 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

MWD1001 Website Production 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