JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created

JS: DOM FormJS: DOM Form

•Form ObjectForm Object– The Form object represents an HTML The Form object represents an HTML

form.form.– For each instance of a <form> tag in an For each instance of a <form> tag in an

HTML document, a Form object is HTML document, a Form object is created.created.

– Main form methodsMain form methods•document.forms[0].submit()document.forms[0].submit()

•document.forms[0].reset()document.forms[0].reset()

•document.forms[0].action = ‘register.php';document.forms[0].action = ‘register.php';


• document.forms[number].elements[numbdocument.forms[number].elements[number]er]

• Every <input>, <select> and <textarea> Every <input>, <select> and <textarea> is form element.is form element.


• <form name="personal" action="something.pl" onsubmit="return <form name="personal" action="something.pl" onsubmit="return checkscript()"> <input type=text size=20 name=name>checkscript()"> <input type=text size=20 name=name>

• <input type=text size=20 name=address><input type=text size=20 name=address>

• <input type=text size=20 name=city> <input type=text size=20 name=city>

• </form></form>

• Now you can access these elements by:Now you can access these elements by:– document.personal.namedocument.personal.name– document.personal.address document.personal.address – document.personal.citydocument.personal.city


• Getting data from Texts, textareas and hidden fieldsGetting data from Texts, textareas and hidden fields

• user_input = document.forms[0].user_input = document.forms[0].texttext.value.value

• where where texttext is the name of the text field, textarea or is the name of the text field, textarea or hidden field. hidden field.

• The value of this element gives the text, so we transfer The value of this element gives the text, so we transfer it to user_input.it to user_input.

• Setting valueSetting value

– document.forms[0].text.value = 'The new document.forms[0].text.value = 'The new value';value';


• Select boxesSelect boxes– Select boxes are simple too:Select boxes are simple too:

•user_input = document.forms[0].select.value;user_input = document.forms[0].select.value;

– To change the selected option in a select box, To change the selected option in a select box, you have to change its selectedIndex, you have to change its selectedIndex, •document.forms[0].select.selectedIndex = 2;document.forms[0].select.selectedIndex = 2;


• CheckboxesCheckboxes– Checkboxes need a slightly different Checkboxes need a slightly different

approach. approach. – We already know their values, but want to We already know their values, but want to

know whether the user has checked them. know whether the user has checked them. – The checked property tells us. The checked property tells us. – It can have two values: true or false.It can have two values: true or false.


• if (document.forms[0].checkbox.checked) if (document.forms[0].checkbox.checked)

• { { – user_input = user_input =

document.forms[0].checkbox.name document.forms[0].checkbox.name

• }}

• To check a checkbox, set its property To check a checkbox, set its property checked to true:checked to true:– document.forms[0].checkbox.checked = truedocument.forms[0].checkbox.checked = true


• Radio buttonsRadio buttons

• Unfortunately it's not possible to see at Unfortunately it's not possible to see at once which radio button in a group the once which radio button in a group the user has checked. user has checked.

• You need to go through all radio's and You need to go through all radio's and see which one's checked property is true.see which one's checked property is true.


• Radio buttonsRadio buttons

• for for (i=0;i<document.forms[0].radios.length;i(i=0;i<document.forms[0].radios.length;i++) ++) – { if (document.forms[0].radios[i].checked) { if (document.forms[0].radios[i].checked)

•{ { – user_input = document.forms[0].radios[i].value; user_input = document.forms[0].radios[i].value;

•} }

– } }


• Radio buttonsRadio buttons– where radios is the name of the group of where radios is the name of the group of

radio buttons.radio buttons.– Note that document.forms[0].radios is an Note that document.forms[0].radios is an

array filled with all radio buttons. array filled with all radio buttons. – Loop through all of them and see if it is Loop through all of them and see if it is

checked. checked. – If one is, transfer the value of that radio If one is, transfer the value of that radio

button to user_input.button to user_input.


• Using elements[]Using elements[]– var var

form=document.getElementById("myForm");form=document.getElementById("myForm");– form.elements[0].value;form.elements[0].value;– form.elements[0].value = “new value”;form.elements[0].value = “new value”;

JS: Event HandlingJS: Event Handling

• The building blocks of an interactive web page The building blocks of an interactive web page is the Javascript event system. is the Javascript event system.

• An event in Javascript is something that An event in Javascript is something that happens with or on the web page. A few happens with or on the web page. A few example of events:example of events:– A mouse click A mouse click – The web page loading The web page loading – Mousing over a hot spot on the web page, also Mousing over a hot spot on the web page, also

known as hovering known as hovering – Selecting an input box in an HTML form Selecting an input box in an HTML form – A keystroke A keystroke

JS: Event HandlingJS: Event Handling

• Different occurrences generate different types of Different occurrences generate different types of events. events.

• When the user moves the mouse over a hyperlink, When the user moves the mouse over a hyperlink, it causes a different type of event than when the it causes a different type of event than when the user clicks the mouse on the hyperlink. user clicks the mouse on the hyperlink.

• Even the same occurrence can generate different Even the same occurrence can generate different types of events based on context: types of events based on context: – when the user clicks the mouse over a Submit button, when the user clicks the mouse over a Submit button, – for example, it generates a different event than when the for example, it generates a different event than when the

user clicks the mouse over the Reset button of a form.user clicks the mouse over the Reset button of a form.

JS: Event Handlers & HTML JS: Event Handlers & HTML elementelement

• Note:Note: Events are normally used in combination with Events are normally used in combination with functions, and the function will not be executed before the functions, and the function will not be executed before the event occurs!event occurs!

• onload and onUnloadonload and onUnload– The onload and onUnload events are triggered when the user The onload and onUnload events are triggered when the user

enters or leaves the page.enters or leaves the page.– The onload event is often used to check the visitor's browser type The onload event is often used to check the visitor's browser type

and browser version, and load the proper version of the web page and browser version, and load the proper version of the web page based on the information.based on the information.

– Both the onload and onUnload events are also often used to deal Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a with cookies that should be set when a user enters or leaves a page. page.

– For example, you could have a popup asking for the user's name For example, you could have a popup asking for the user's name upon his first arrival to your page. upon his first arrival to your page.

– The name is then stored in a cookie. Next time the visitor arrives at The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: your page, you could have another popup saying something like: "Welcome John Doe!"."Welcome John Doe!".


• onFocus, onBlur and onChangeonFocus, onBlur and onChange– The onFocus, onBlur and onChange events The onFocus, onBlur and onChange events

are often used in combination with validation are often used in combination with validation of form fields.of form fields.

– Below is an example of how to use the Below is an example of how to use the onChange event. The checkEmail() function onChange event. The checkEmail() function will be called whenever the user changes the will be called whenever the user changes the content of the field:content of the field:•<input type="text" size="30" id="email" <input type="text" size="30" id="email"

onchange="checkEmail()">; onchange="checkEmail()">;


• onSubmitonSubmit– The onSubmit event is used to validate ALL form fields The onSubmit event is used to validate ALL form fields

before submitting it.before submitting it.– The checkForm() function will be called when the user The checkForm() function will be called when the user

clicks the submit button in the form. clicks the submit button in the form. – If the field values are not accepted, the submit should be If the field values are not accepted, the submit should be

cancelled. cancelled. – The function checkForm() returns either true or false. The function checkForm() returns either true or false. – If it returns true the form will be submitted, otherwise the If it returns true the form will be submitted, otherwise the

submit will be cancelled.submit will be cancelled.

•<form method="post" action="xxx.htm" <form method="post" action="xxx.htm" onsubmit="return checkForm()"> onsubmit="return checkForm()">


•onMouseOver and onMouseOutonMouseOver and onMouseOut– onMouseOver and onMouseOut are onMouseOver and onMouseOut are

often used to create "animated" often used to create "animated" buttons.buttons.

– onMouseOver animate when a onMouseOver animate when a button is click such as in a:hoverbutton is click such as in a:hover

– onMouseOut animate when a onMouseOut animate when a button is normal statebutton is normal state

JS: Form verificationJS: Form verification

•Activity 01:04Activity 01:04

Documents

JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created