1. Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp. 592-597, 608-617

2. 2 Scripting Tables

3. 3 In this lecture, we'll learn how to script tables and forms. To start, we'll learn how to add and remove rows and cells from a table, and we'll learn how to sort a table by any column in the table. Then, we'll learn some advanced skills for scripting forms that build on the skills that we learned earlier in the quarter

4. 4 Scripting Tables (Using JavaScript) Table Template http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_00_template.html Adding a Row with appendChild() Method http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_01_create_1.html Adding a Row with insertRow() Method http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_01_create_2.html Deleting a Row with deleteRow() Method (Top) http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_02_delete_1.html Deleting a Row with deleteRow() Method (Bottom) http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_02_delete_2.html Reorder Rows http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_03_reorder_rows.html Shuffle Rows http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_04_shuffle.html Sort Rows http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_05_sort.html Sort Rows (Book Example) table_sort.zip (ZIPPED) table_sort.zip

5. 5 Scripting Tables (using jQuery) Table Striping with jQuery http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_06_stripe_jquery.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_06_stripe_jquery.css http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_06_stripe_jquery.js Table Sorting with jQuery http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_07_sort_jquery.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_07_sort_jquery.css http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_07_sort_jquery.js

6. 6 Scripting Forms

7. 7 When you use JavaScript to access forms, you can create new scripts for your web pages. This portion of the lecture begins by explaining how to access a form with JavaScript. Then you’ll learn about the various properties and methods to use with forms and form elements. You’ll also learn about forms and accessibility, how to validate form elements, and how to use elements as navigational tools.

8. 8 Accessing Forms Each time you add a set of and tags to an HTML document, a form object is created. To access one of the forms using JavaScript, you can use any one of the following options: Use the forms array of the document object Name the form in the opening form tag and use that name to access the form Give the form an id in the opening form tag and access it using the document.getElementById() method

9. 9 Using the forms Array The forms array allows you to access a form using an index number in the array. Each set of and tags on the page will create an additional element in the forms array, in the order in which they appear in the document. Thus, you can reference the first form in a document like this: document.forms[0] As you will recall, arrays begin counting at 0, so the previous example will access the first form in the document. If you want to access the second form, you could use the following: document.forms[1] Accessing the form doesn’t do anything on its own. The form that you access is an object. To use it, you need a property or method of the object.

10. 10 Forms: A Property Value The examples in this section use the form object’s length property. This property allows you to find out how many elements exist (such as input boxes, select boxes, radio buttons, and others) in an HTML form. For example, take a look at this code: Name: E-mail: The code creates a short form that contains three elements: two text boxes and the submit button. Because it’s the only form on the page, it will be the first form, allowing you to access it using document.forms[0]. To use the length property, add it to the end like this: document.forms[0].length

11. 11 Forms: A Property Value CONTINUED Using the preceding code, you can create a short script to tell the viewer how many elements are in the form. (You wouldn’t typically use the length property this way, but it’s good for an example.) The code that follows will write the information on the page after the form: Name: E-mail: document.write("The form has " + document.forms[0].length + " elements."); This code informs the viewer that the form has three elements. http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_01_elements.html

12. 12 Covering Two Length Properties If you want to try to show the number of elements in the forms on a page when there is more than one form, you can use a more complex script that prints a message for each form on the page. Recall that because forms are an array, you can find the length of the array. The length of the array is the number of forms on the page (much like the length property of a particular form is the number of elements in the form). To find the number of forms on the page rather than the length of a form, remember not to specify a form by leaving off the brackets and the index number, as in the following example: document.forms.length This syntax finds the number of forms on the page. Thus, you must remember this: document.forms.length finds the number of forms on the page. document.forms[x].length finds the number of elements in a specific form on the page, where x is the index number of the form to be accessed.

13. 13 Covering Two Length Properties CONTINUED The code in the example file creates two forms in the HTML document. The script then opens a loop beginning at 0 (where arrays begin counting) and ending before it gets to the value of document.forms.length, which is the number of forms on the page. Because there are two forms (which will make 2 the value of document.forms.length), the count runs from 0 to 1 and then stops. The count allows you to access the forms array at positions 0 and 1, which will turn out to be Form 1 and Form 2 in the HTML code. The formnum variable has the value of the position number in the array plus one, which is the number of the form as seen in the HTML code. The script then writes the number of elements in each form on the page using the document.write() statements. The forms array is used with the value of the count variable as the index number, which finds the number of elements in the specified form each time through the loop. http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_02_lengths.html

14. 14 Using Form Names Using form names allows you to name the forms on the page that you want to access later. This option can help eliminate any confusion between document.forms.length and document.forms[x].length because you won’t need to use the latter unless you’re trying to loop through each element in each form on the page. To use a form name, you must add a name=“yourname” attribute to the opening form tag on the form you want to access. Replace yourname with a name you want to use for the form, as in the following code: Name:

15. 15 Using Form Names CONTINUED The name of the form is now infoForm, and you can use this name to access the form in your script. The name of the form allows it to become an instance of the form object that you can access through its name. To use JavaScript to access a form that uses a form name, you can use the syntax shown in the following example: Name: document.write("The form has "+ document.infoForm.length + " elements."); http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_03_names.html

16. 16 Using an ID The third way to access a form is to use an id attribute and to then use document.getElementById() to access the form element. This is often the clearest way to access a form and its elements, because you can access each element by using its individual id, whereas the previous two access methods require you to know which array index the form is at or the form name and the element’s name. If you wanted to write the script from the previous section using the id method, you could use the following code: Name: var formLength = document.getElementById("infoForm").length; document.write("The form has " + formLength + " elements."); http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_04_id.html

17. 17 Using the Properties and Methods of the Form Object

18. 18 Using the Properties and Methods of the Form Object The JavaScript form object will help you when you need to access certain elements or attributes of the form in a script. The form object has only a few properties and methods. The properties are described first. Properties The form object’s properties provide information you might need when working with forms in your scripts. The table on the next slide lists the properties of the form object and their values. Most of these properties just hold values corresponding to the various attributes in an HTML form tag. A few of them have different types of values, though, as explained shortly.

19. 19

20. 20 The action Property The action property allows you to access the value of the action="url" attribute in the opening form tag. This attribute is used to send the form to a server-side script for processing (such as a Perl or PHP script). The following example shows how to access the property with a named form: Name: document.write("The form goes to " + document.infoForm.action); This script writes the URL on the page given in the action attribute. http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_05_action_property.html

21. 21 The elements Property (Array) The elements property is an array that allows you to access each element within a specific form in the same order it appears in the code, starting from 0. It works much like the forms array but has an entry for each element in a given form. To use the elements array to access an element in a form, use the index number for the element you want to access. For instance, the following form has two elements: Name: To access the first element (the text box), you can use the syntax shown here: document.infoForm.elements[0] Alternatively, if you want to use the forms array, you could use this syntax: document.forms[0].elements[0]

22. 22 The elements Property (Array) CONTINUED Yet another option to access the text box is to name it (like with the form) and access it using its name. You can do this with each element, as well as the form itself; you can choose which method is best for accessing a form and its elements in each situation. The following code gives the form and the text box a name, and allows you to access them using those names: Name: In this case, you could access the text box using the form name and the text box name, as in the syntax shown here: document.infoForm.yourname

23. 23 The elements Property (Array) CONTINUED You can of course also use the id method: Name: Then, you can access the input element using document.getElementById(): document.getElementByID("yourname"); http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_06_elements_01.html

24. 24 Forms: Methods and Properties To create scripts that use the elements of a form, you must be able to access a property for a form element. Each form element is an instance of an object with its own properties and methods, as shown in the table on the next slide. The form elements all have their own selection of properties and methods, but many of them are used with most or all of the form elements. The following sections will look in more detail at the properties and methods listed in the table in the next slide and how they are used with the form elements.

25. 25

26. 26 The checked Property The checked property is used with check boxes and radio buttons. It has a Boolean value, which is true if the box or button is checked and false if it isn’t. For instance, use the following code to try it out with a check box: Check box to say Yes: function isItChecked() { var yesOrNo = document.getElementById("yesNo"); if (yesOrNo.checked) { window.alert("Yes! The box is checked!"); } else { window.alert("No. The box is not checked!"); } http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_07_checked_1.html

27. 27 The defaultChecked Property The defaultChecked property is also a Boolean value of true or false. The value depends on whether the check box or radio button has the checked attribute in its HTML (which sets the element to be checked by default on the page). If the element has the checked attribute, the value is true. If not, the value is false. For instance, the following HTML code uses the checked attribute: Do you want us to send you e-mail updates and offers? Yes No Because the first check box has the checked attribute set to checked, the checked property for that element would return true. For the second check box element, the property would return false. http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_08_defaultchecked.html

28. 28 The defaultValue Property You use the defaultValue property with text boxes and text areas. It holds the value of the default value set in the value attribute of the element’s tag. This capability can be useful if you set a default value in a text box, the user deletes it, and then the user decides it would be nice to have the default value back. You could code a button to return that value if clicked by the viewer, as shown in the following code: Favorite URL: function backToDefault() { var urlBox = document.getElementById("favURL"); urlBox.value = urlBox.defaultValue; } http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_09_defaultvalue.html

29. 29 The form Property The form property is often used with the keyword “this” to refer to the form that contains the element that uses it. For instance, if you want to change the value of a text box by clicking a button, you could refer to the form by using this.form rather than needing the name or id of the form: Favorite URL: <input type="button" value="Change" onclick="this.form.favURL.value='http://www.programajama.com';"> This code changes the current value of the text box from http://www.google.com to http://www.programajama.com when the button is clicked. Using this.form.favurl.value allows you to access the same form from an element within it without having to go back and use a form name or id, which is a bit longer.http://www.google.com http://www.programajama.com http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_10_form_property.html

30. 30 The name Property The name property holds the value of the name attribute of an element. For instance, the following code prints the value of the name of the second element (a text box) on the page: First Name Last Name Email document.write("The second element is "+ document.infoForm.elements[1].name); http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_11_name_property.html

31. 31 The options Property (Array) The options property is an array that contains an element for each option listed in a select box in a form. The index numbers count from 0, and each option is placed in the array in the order in which it is written in the HTML code. The example file shows how you can access the value of an option (this is the value in the value attribute of the option tag, not the content of the tag) and write it on the page. http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_12_options_property.html

32. 32 The selectedIndex Property The selectedIndex property holds the value of the index number of the option (as in the options array in the previous example) that the user has selected. If the first option is selected, the value is 0. If the second option is selected, the value is 1, and so on. This property is discussed in more detail when it is used for a navigation script later in the lecture. http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_13_selectedindex_property.html

33. 33 Methods Now take a look at the form object’s methods. The form object has only two methods, reset() and submit(), which are described next.

34. 34 The reset() Method This method enables you to reset a form using your script, allowing you to reset the form on any event you like. So, if you want to reset a form after the viewer removes focus from an element, you could use the following: Your Favorite Food Drink http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_14_reset_method.html

35. 35 The submit() Method The submit() method allows you to submit a form without the viewer clicking the submit button. The following code shows how to do this when the viewer removes focus from an element (much the same way as with the reset() method): Your Favorite Food Drink http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_15_submit_method.html

36. 36 Validating Forms

37. 37 Validating Forms Validating JavaScript forms is extremely useful. For example, you can validate input before it is submitted, to help reduce the number of forms with incomplete or inaccurate information. Validation of form data prior to submission to, say, a Common Gateway Interface (CGI) script, PHP script, or a Java servlet can save time and reduce load on the server. To begin with validation, we will look at how to use the onsubmit event handler with the return statement as well as learn some validation techniques.

38. 38 onsubmit and the return Statement To validate the contents of one or more elements in a form, you need to know when the viewer tries to submit the form. When the viewer clicks the submit button, a submit event occurs, which can be captured with the onsubmit event handler in the opening form tag. Thus, the following form would be able to do something when the submit button is clicked, before acting on its action attribute: Name: You would replace script here with some JavaScript to be executed when the submit button is clicked. This is often a call to the function that will be run to test one or more of the form fields.

39. 39 onsubmit and the return Statement CONTINUED For the function to do its work, however, you must be sure the submit button is not able to perform its default action if the user's input doesn’t pass the validation. This means that you need a return statement in the onsubmit event handler. You want this statement to return true if the validation passes and to return false if the validation fails. Thus, you want an end result to be either onsubmit="return true;" which allows the submission to continue normally, or onsubmit="return false;" which makes the submission void and thus does nothing.

40. 40 onsubmit and the return Statement CONTINUED For the technique in the preceding code to work with a function, the return statement in the onsubmit event handler must call a function that returns a value of true or false. Thus, you would get a statement like this: onsubmit="return yourfunction();" You would replace yourfunction with a real function name. The key here is that the function must return a value of true or false so that the previous statement will evaluate to what you need (return true; or return false;). The function itself can do anything else, but it needs to have a return statement that sends back a value of true or false to the event handler. http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_16_onsubmit_eventhandler.html

41. 41 Validation Techniques For the most part, validation can be as simple or as complex as you need it to be for your purposes. All you need to do is create your own custom functions to validate the form fields of your choice based on the information needed. For instance, the code in the previous example file checked for an empty text box in a name field. However, for a Zip code, you could check whether the field contains five digits by using a regular expression. If it does not, then you can send an alert telling the viewer the Zip code is invalid and asking for it to be reentered. For an email address you might create a validating function that checks for the position of the '@' and '.' characters to determine whether the email address given is in the correct format. http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_17_form_validation.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_17_form_validation_full.html

42. 42 Table & Form Links Table Sort Scripts Table Sort Scripts Table Sorter (Neil Fraser) Table Sorter Form Handling with JavaScript (HTMLGoodies) Form Handling with JavaScript JavaScript Form Validation Tutorial (Tizag) JavaScript Form Validation Tutorial JavaScript Form Validation (WebCheatSheet) JavaScript Form Validation Building Forms with JavaScript (Techotopia) Building Forms with JavaScript JavaScript Form Validation (EchoEcho) JavaScript Form Validation JavaScript Form Scripts (JavaScript Kits) JavaScript Form Scripts Validatious – JavaScript Form Validation Validatious – JavaScript Form Validation Parsley – JavaScript Form Validation Library Parsley – JavaScript Form Validation Library

43. 43 Please begin working on the LECTURE 16 In-Class Exercises. When you have completed your ICE, call the Instructor over to verify your work. If you have questions about your work, please call over the Instructor to clarify. Once you have completed your ICEs, you are free to go for the day. If you don't finish your ICEs by the end of class, you will still get full credit for actively doing the work, but it is greatly recommended you finish any outstanding ICEs outside of class.