1 Forms and Form elements CSD 340 McCoey

2 Form Object Properties action Usually a call to a server elements encoding method post or get target Methods reset submit Event Handlers onReset onSubmit Usually a call to a validate action Simulates the work of the submit button There are a series of element objects which exist in the form.

3 Form Example A real example---the lab error form—with some validationthe lab error form

4 Form Elements Button checkbox FileupLoad Hidden password radio reset Submit text textarea Select-one select-multiple allows more than one in the list to be checked

5 Button Object Properties name value Method click Event handlet onClick Example

6 Submit Object Properties Name Value Methods click Event Handler onClick () Example

7 Reset Object Properties Name Value Method click Event Handler onClick Example

8 Form Elements Array You may reference the items in a form by the formname.elements[n] where n is the input area defined on the form. The numbering starts at 0--so the first input parameter is the same as formname.elements[0].

9 Form Processing Validation CSD 340 McCoey

10 JS Functions to validate form elements JS functions can be used to validate information in a form based on an onclick event. You can use the value attribute of the form element to validate the information. If the information is valid, then the function returns a true. If the information is invalid, the function should tell the user, point to the invalid entry and return a false.

11 JS Function Arguments You can use a general JS function and customize it to change the process based on specific information. To do this you need to add a set of arguments to the function definition. Arguments act as place holders during the general process definition. When the function is called, you pass the actual values to the function.

12 General format function functionname (argumentlist) Then when you call the function, you supply the specific set of variables in the call function functioname (valuelist)

13 Example of JS arguments If you define a JS function definition to calculate a tax amount using the following definition for the function. The function has two arguments in the definition—total and rate. function tax (total, rate) { var tax_amt; tax_amt = total * rate; return tax_amt; }

14 JS Functions Now you want to call the function and send it specific values to use in the calculation. Yo want the results from the calculation to be returned. So assume you have a form taxform and you have a textbox called taxAmt. Then the call might look like document.taxform.taxAmt = tax(129.28,0.1); The result of the calculation is held in the variable tax_amt in the function and the return statement in the function passes the result back to the form.

15 Example of using JS to process a form entry Assume form name is request, and form field is a text field with name of entry. Assume you want to see if user entered any value. Assume the validate function is called form_check. Assume that if the form is valid, you wish to call a server application. If they did not enter any data, display an alert and put them back to the entry. The onsubmit action would be onsubmit = “return form_check ();”

16 JS Function coding for form entry validation function form_check () { if (document.request.entry.value == "") { alert ("You must fill in the entry field"); document.request.entry.focus(); return (false); } else { return (true); }

17 Validating String formats Javascript has a string object included. You may use the string object to check a format. For example if you are validating an and it needs to have you may use the string object to check if is present. You may extend the validation to be sure the number of characters after is a maximum of 3 (for the correct format).

18 String Object stringname.toLowerCase stringname.toUpperCase stringname.indexOf(“char”, n) Returns the start of position of where the character string begins in the entire string.

19 String Object--more stringname.lastIndexof(“char”,n) Searches the string for the set of characters in the string. Returns the last position of the string. stringname.substring(start,stop) Returns a subset of the given string in the start, stop position including the indicated positions.

20 Checking the function valid ( ) { invalidChars = " /:,;" if ( == "") {return false} for (i=0; i<invalidChars.length; i++) { badChar = invalidChars.charAt(i) if ( .indexOf(badChar,0) > -1) {return false} } atPos = if (atPos == -1) {return false} if > -1) {return false} periodPos = .indexOf(".",atPos) if (periodPos == -1) {return false} if (periodPos+3 > .length) {return false} return true}