1

Forms and Form elements

CSD 340McCoey

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 <form name=“myTest”

method=“post” action=“emailverification.asp”>

</form>A real example---the lab error form—

with some validation

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<Input type=button

name = “thisbut”value = “Test But”onClick =“ClkBut ()”)>

6

Submit Object Properties

Name Value

Methods click

Event Handler onClick ()

Example<Input type=submit

name = “thissubmit”value = “TestSubmitonClick =“ClkSubmit ()”)>

7

Reset Object Properties

Name Value

Method click

Event Handler onClick

Example<Input type=reset

name = “thisreset”value = “TestRestonClick =“ClkReset ()”)>

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 340McCoey

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 validationfunction 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 emailfunction 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}