Copyright ©2005  Department of Computer & Information Science Introducing DHTML & DOM: JavaScript & Forms

Copyright ©2005  Department of Computer & Information Science Goals By the end of this lecture you should … Understand the differences between methods of posting form data.Understand the differences between methods of posting form data. Understand how to program using different form event handlers.Understand how to program using different form event handlers. Understand how to use JavaScript to read the values from various form objects.Understand how to use JavaScript to read the values from various form objects.

Copyright ©2005  Department of Computer & Information Science The form Object In order to access form elements, we need to create a form object using the XHTML container.In order to access form elements, we need to create a form object using the XHTML container. A valid container must include a value for the name attribute and also assigns values for the method and action attributes.A valid container must include a value for the name attribute and also assigns values for the method and action attributes.

Copyright ©2005  Department of Computer & Information Science form Element Attributes name – The name attribute provides a unique identifier for the form and provides for access by scripts.name – The name attribute provides a unique identifier for the form and provides for access by scripts. action – The action attribute specifies what to do when the user clicks to submit the form.action – The action attribute specifies what to do when the user clicks to submit the form. method – The method attribute specifies how the web browser should send form values to the form processing script. Valid values include either get or post.method – The method attribute specifies how the web browser should send form values to the form processing script. Valid values include either get or post.

Copyright ©2005  Department of Computer & Information Science form Sample Form objects go here. </form>

Copyright ©2005  Department of Computer & Information Science Referencing the form Object To reference the form object in your JavaScripts, use a path to the form name: window.document.formNameTo reference the form object in your JavaScripts, use a path to the form name: window.document.formName Alternatively, you can reference the form use the window.forms array: window.document.forms[index]Alternatively, you can reference the form use the window.forms array: window.document.forms[index]

Copyright ©2005  Department of Computer & Information Science form Event Handlers onSubmit – Allows us to run JavaScript commands before the browser sends form values for processing; interrupts that request if onSubmit receives a false value.onSubmit – Allows us to run JavaScript commands before the browser sends form values for processing; interrupts that request if onSubmit receives a false value. onReset – Allows us to run JavaScript commands before the form resets to default values; interrupts the reset if onReset receives a false value.onReset – Allows us to run JavaScript commands before the form resets to default values; interrupts the reset if onReset receives a false value.

Copyright ©2005  Department of Computer & Information Science Handling Textboxes To read or set the value of a textbox, use a path to the textbox’s value attribute: window.document.formName. textboxName.valueTo read or set the value of a textbox, use a path to the textbox’s value attribute: window.document.formName. textboxName.value

Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptForms_01.html

Copyright ©2005  Department of Computer & Information Science Form Component Event Handlers onFocus – When a cursor moves to a form component.onFocus – When a cursor moves to a form component. onClick – When the user clicks inside or on a form component.onClick – When the user clicks inside or on a form component. onBlur – When the user moves the cursor from a form component.onBlur – When the user moves the cursor from a form component. onChange – When the user changes the value/state of a form component.onChange – When the user changes the value/state of a form component.

Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptForms_02.html

Copyright ©2005  Department of Computer & Information Science Preventing Textbox Manipulation Sometimes, you might want to use a textbox for output instead of input (for instance, for the results of calculations). To prevent users from manipulating textbox values, use the blur() method to prevent a cursor from setting focus: onFocus = “this.blur()”;Sometimes, you might want to use a textbox for output instead of input (for instance, for the results of calculations). To prevent users from manipulating textbox values, use the blur() method to prevent a cursor from setting focus: onFocus = “this.blur()”;

Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptForms_01.html

Copyright ©2005  Department of Computer & Information Science Password Fields Password fields are just like textboxes ; they have the same properties, methods and react to the same events.: window.document.formName. passwordFieldName.valuePassword fields are just like textboxes ; they have the same properties, methods and react to the same events.: window.document.formName. passwordFieldName.value

Copyright ©2005  Department of Computer & Information Science Hidden Fields Sometimes, developers will include hidden fields on a web form to send information that the user doesn’t need to see. We handle such fields as if they were regular textboxes : window.document.formName. hiddenFieldName.valueSometimes, developers will include hidden fields on a web form to send information that the user doesn’t need to see. We handle such fields as if they were regular textboxes : window.document.formName. hiddenFieldName.value

Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptForms_03.html

Copyright ©2005  Department of Computer & Information Science Text Areas A textarea allows users to type multiple lines of text. To access a textarea object via JavaScript, use the same syntax as a textbox : window.document.formName. textAreaName.valueA textarea allows users to type multiple lines of text. To access a textarea object via JavaScript, use the same syntax as a textbox : window.document.formName. textAreaName.value

Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptForms_04.html

Copyright ©2005  Department of Computer & Information Science select Lists JavaScript sees the options of a select list as a zero-indexed array.JavaScript sees the options of a select list as a zero-indexed array. select lists come in two flavors – one that restricts the user to one option and the other that allows multiple options. JavaScript handles each differently …select lists come in two flavors – one that restricts the user to one option and the other that allows multiple options. JavaScript handles each differently …

Copyright ©2005  Department of Computer & Information Science Single Option select Lists To return a value from a single option select list, we would use the selectedIndex property of the select object: window.document.formName.select [select.selectedIndex].valueTo return a value from a single option select list, we would use the selectedIndex property of the select object: window.document.formName.select [select.selectedIndex].value

Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptForms_06.html

Copyright ©2005  Department of Computer & Information Science Multiple Option select Lists To return multiple values from a multiple option select list, we would use the selected property of the select object and a for loop: window.document.formName.select [forLoopCounterValue].selectedTo return multiple values from a multiple option select list, we would use the selected property of the select object and a for loop: window.document.formName.select [forLoopCounterValue].selected

Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptForms_05.html

Copyright ©2005  Department of Computer & Information Science Handling radio Buttons Programmers use radio buttons to restrict a user’s choice to a single item from among a set of multiple choices.Programmers use radio buttons to restrict a user’s choice to a single item from among a set of multiple choices. In a single set of buttons, each radio button shares its name with others in the same set. On the JavaScript side, this lends itself very well to using an array …In a single set of buttons, each radio button shares its name with others in the same set. On the JavaScript side, this lends itself very well to using an array …

Copyright ©2005  Department of Computer & Information Science Handling radio Buttons We can use the checked attribute of the radio object, in conjunction with a for loop to see which radio the user checked and report its value.We can use the checked attribute of the radio object, in conjunction with a for loop to see which radio the user checked and report its value. Although radio buttons in the same set share the same name, their values can be different.Although radio buttons in the same set share the same name, their values can be different.

Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptForms_07.html

Copyright ©2005  Department of Computer & Information Science Handling checkboxes checkboxes are similar to radio buttons (they can share the same name), but users can choose more than one.checkboxes are similar to radio buttons (they can share the same name), but users can choose more than one. We can handle checkboxes in a similar manner: using a for loop along with an if statement to check for the checked attribute and then report the value.We can handle checkboxes in a similar manner: using a for loop along with an if statement to check for the checked attribute and then report the value.

Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptForms_08.html

Copyright ©2005  Department of Computer & Information Science Summary The tag uses the action and method attributes to deliver data from a form to a processing script on a server.The tag uses the action and method attributes to deliver data from a form to a processing script on a server. We can use event handlers like onSubmit and onReset to read form values in JavaScript.We can use event handlers like onSubmit and onReset to read form values in JavaScript. continued …

Copyright ©2005  Department of Computer & Information Science Summary We can use the value attribute to read values from textboxes, password fields, hidden fields and text areas.We can use the value attribute to read values from textboxes, password fields, hidden fields and text areas. We can use for loops, along with if structures to determine the values of items in a set, like items from select objects, radio buttons or checkboxes.We can use for loops, along with if structures to determine the values of items in a set, like items from select objects, radio buttons or checkboxes.

Copyright ©2005  Department of Computer & Information Science Resources JavaScript Concepts & Techniques: Programming Interactive Web Sites by Tina Spain McDuffie (Franklin, Beedle & Associates, 2003) ISBN: JavaScript Concepts & Techniques: Programming Interactive Web Sites by Tina Spain McDuffie (Franklin, Beedle & Associates, 2003) ISBN: