Forms and Form elements

1. Forms and Form elements CSD 340 McCoey

2. 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. Form Object

3. Form Example • <form name=“myTest” method=“post” action=“emailverification.asp”> • </form> A real example---the lab error form—with some validation

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

5. Properties name value Method click Event handlet onClick Example <Input type=buttonname = “thisbut”value = “Test But”onClick =“ClkBut ()”)> Button Object

6. Properties Name Value Methods click Event Handler onClick () Example <Input type=submitname = “thissubmit”value = “TestSubmitonClick =“ClkSubmit ()”)> Submit Object

7. Properties Name Value Method click Event Handler onClick Example <Input type=resetname = “thisreset”value = “TestRestonClick =“ClkReset ()”)> Reset Object

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 ProcessingEmail 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 email and it needs to have an @, you may use the string object to check if the @ is present. • You may extend the validation to be sure the number of characters after the @ is a maximum of 3 (for the correct email 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 email function validEmail(email) { invalidChars = " /:,;" if (email == "") {return false} for (i=0; i<invalidChars.length; i++) { badChar = invalidChars.charAt(i) if (email.indexOf(badChar,0) > -1) {return false} } atPos = email.indexOf("@",1) if (atPos == -1) {return false} if (email.indexOf("@",atPos+1) > -1) {return false} periodPos = email.indexOf(".",atPos) if (periodPos == -1) {return false} if (periodPos+3 > email.length) {return false} return true}