CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript forms

Agenda My Web Site: (download syllabus, class notes). JavaScript forms. Form samples.

Forms and Form Elements In JavaScript programs, the emphasis is not on form submission and processing but instead on event handling. A form and all input elements in it have event handlers that JavaScript can use to respond to user interactions within the form. With server-side programs, an HTML form is not useful unless it has a Submit button. With JavaScript, on the other hand, a Submit button is never necessary. With JavaScript event handlers, a form can have any number of push buttons that perform various actions when clicked.

The Form Object Form objects are available as elements of the forms[ ] array, which is a property of the Document object. You can refer to the last form in a document: document.forms[document.forms.length – 1] The most interesting property of the Form object is the element[ ] array, which contains JavaScript objects (of various types) that represent the various input elements of the form. document.forms[1].elements[2] // 3 rd element 2 nd form The remaining properties of the Form object are of less importance. The action, encoding, method, and target properties correspond directly to the action, encoding, method, and target attributes of the tag.

The Form Object (continue…) The JavaScript Form object supports two methods, submit() and reset(). Invoking the submit() method of a Form submits the form Invoking reset() resets the form elements. The Form object provides the onsubmit event handler to detect form submission and the onreset handler to detect form resets. <form … onreset="return confirm('Really erase All data and start over? '); " >

Defining Form Elements HTML form elements allow you to create simple user interfaces for your JavaScript programs HTML form elements:  button  checkbox  file  hidden  option  password  radio  reset  select  submit  text  textarea

Naming Forms and Form Elements Every form element has a name attribute that must be set in its HTML tag if the form is to be submitted to a server-side program. For example, a form is defined with this tag: You can refer to the Form object as: document.everything You will find this more convenient: document.forms[0] Using a form name makes your code position- independent.

Form Element Event Handlers Most form elements support most of the following event handlers:  onclick  onchange  onfocus  onblur Within the code of an event handler, the this keyword refers to the document element that triggered the event. Since all form elements have a form property that refers to the containing form, the event handlers of a form element can always refer to the Form object as this.form.

Form – change background color sample function changeColor(color) { document.getElementById('x').style.backgroundColor=color; } This example demonstrates how to change the background color of an input field. Mouse over the three colored table cells, and the input field will change background-color:

Form – change text color sample function changeColor(color) { document.getElementById('x').style.color=color; } This example demonstrates how to change the text color of an input field. Mouse over the three colored table cells, and the text will change color:

Form – checkbox sample function makeCheck(thisForm) { for (i = 0; i < thisForm.option.length; i++) { thisForm.option[i].checked=true; } function makeUncheck(thisForm) { for (i = 0; i < thisForm.option.length; i++) { thisForm.option[i].checked=false; } Apples Oranges Bananas Melons