BIT116: Scripting Lecture 18

1. BIT116: ScriptingLecture 18 Instructor: Craig Duckett cduckett@cascadia.edu Thursday, August 20th, 2015 Scripting Tables and Forms

2. ASSIGNMENT ANNOUNCEMENTS Assignment 1GRADED AND RETURNED! Assignment 1 RevisionGRADED AND RETURNED! Assignment 2GRADED AND RETURNED! Woot! Woot! Assignment 2 RevisionGRADED AND RETURNED! Woot! Woot! Assignment 3due Lecture 14, TONIGHT Thursday, August 20th, by midnight. Assignment 3 Revisondue on Lecture 16, NEXTThursday, August 27th, by midnight. Extra Credit 01 due on Lecture 16, NEXTThursday, August 27th, by midnight. FINAL EXAMon Lecture 16, NEXTThursday, August 27th IF YOU WANT TO SEE IF YOU WILL BE EXEMPT FROM FINAL EXAM YOU MUST HAVE ALL WORK SUBMITTED FOR GRADING BY TUESDAY,AUGUST 25th

3. BIT116 Course/Instructor Evaluations http://www.cascadia.edu

4. Scripting Tables

5. Scripting Tables 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

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

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

8. Scripting Forms

9. Scripting Forms 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 <select></select> elements as navigational tools.

10. Accessing Forms • Each time you add a set of <form> and </form> 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

11. Using the forms Array • The forms array allows you to access a form using an index number in the array. Each set of <form> and </form> 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.

12. 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: • <body> • <form> • Name: <input type="text"> • E-mail: <input type="text"> • <input type="submit" value="Submit"> • </form> • </body> • 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

13. 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: • <body> • <form> • Name: <input type="text"><br> • E-mail: <input type="text"><br> • <input type="submit" value="Submit"> • </form> • <p> • <script> • document.write("The form has " + document.forms[0].length + " elements."); • </script> • </p> • </body> • This code informs the viewer that the form has three elements. http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_01_elements.html

14. 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.lengthfinds 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.

15. 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_18/form_02_lengths.html

16. 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: • <form name="infoForm"> • Name: <input type="text"><br> • <input type="submit"> • </form>

17. 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: • <body> • <form name="infoForm"> • Name: <input type="text"><br> • <input type="submit"> • </form> • <p> • <script type="text/javascript"> • document.write("The form has "+ document.infoForm.length + " elements."); • </script> • </p> • </body> http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_03_names.html

18. 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: • <form id="infoForm"> • Name: <input type="text"><br> • <input type="submit"> • </form> • <p> • <script> • varformLength= document.getElementById("infoForm").length; • document.write("The form has " + formLength + " elements."); • </script> • </p> http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_04_id.html

19. Using the Properties and Methods of the Form Object

20. 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.

22. 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: • <form name="infoForm" action="http://www.programajama.com/php/form.php"> • Name: <input type="text"><br> • <input type="submit"> • </form> • <p> • <script> • document.write("The form goes to " + document.infoForm.action); • </script> • </p> • This script writes the URL on the page given in the action attribute. http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_05_action_property.html

23. 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: • <form name="infoForm"> • Name: <input type="text"><br> • <input type="submit"> • </form> • 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]

24. 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: • <form name="infoForm"> • Name: <input type="text" name="yourname"><br> • <input type="submit"> • </form> • 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

25. The elements Property (Array) CONTINUED • You can of course also use the id method: • <form> • Name: <input type="text" id="yourname"><br> • <input type="submit"> • </form> • Then, you can access the input element using document.getElementById(): • document.getElementByID("yourname"); http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_06_elements_01.html

26. 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.

28. The checked Property • The checkedproperty 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: • <form> • Check box to say Yes: <input type="checkbox" id="yesNo"><br><br> • <input type="button" value= "See the Answer" onclick="isItChecked();"> • </form> • <script> • function isItChecked() { • varyesOrNo= document.getElementById("yesNo"); • if (yesOrNo.checked) { • window.alert("Yes! The box is checked!"); • } • else { • window.alert("No. The box is not checked!"); • } • } • </script> • </body> http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_07_checked_1.html

29. The defaultChecked Property • The defaultCheckedproperty 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: • <form> • Do you want us to send you e-mail updates and offers?<br> • Yes <input type="checkbox" id="yes" checked="checked"> • No <input type="checkbox" id="no" > • </form> • 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_18/form_08_defaultchecked.html

30. 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: • <form> • Favorite URL:<br> • <input type="text" id="favURL" value="http://www.programajama.com"> • <br><br> • <input type="button" value="Reset Default" onclick="backToDefault();"> • </form> • <script> • function backToDefault() { • varurlBox= document.getElementById("favURL"); • urlBox.value= urlBox.defaultValue; • } • </script> http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_09_defaultvalue.html

31. The form Property • The formproperty 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: • <form> • Favorite URL:<br> • <input type="text" name="favURL" value=http://www.google.com> • <br><br> • <input type="button" value="Change" • onclick="this.form.favURL.value='http://www.programajama.com';"> • </form> • 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://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_10_form_property.html

32. The name Property • The nameproperty 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: • <body> • <form name="infoForm"> • <input type="text" name="firstName"> First Name<br> • <input type="text" name="lastName"> Last Name<br> • <input type="text" name="email"> Email<br> • <input type="submit" value="Submit"> • </form> • <p> • <script> • document.write("The second element is "+ document.infoForm.elements[1].name); • </script> • </p> • </body> http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_11_name_property.html

33. 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_18/form_12_options_property.html

34. The selectedIndexProperty The selectedIndexproperty 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_18/form_13_selectedindex_property.html

35. 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.

36. 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: • <body> • <form> • Your Favorite Food • <input type="text" name="favFood" onblur="this.form.reset();"><br> • Drink <input type="text"> • <br><br> • <input type="reset" value="Reset Form"> • <input type="submit" value="Submit Form"> • </form> • </body> http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_14_reset_method.html

37. 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): • <body> • <form action="http://site.com/php/form.php"> • Your Favorite Food • <input type="text" name="fav_food" onblur="this.form.submit();"><br> • Drink <input type="text"> • <br><br> • <input type="submit" value="Submit Form"> • </form> • </body> http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_15_submit_method.html

38. Validating Forms

39. 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.

40. onsubmitand 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: • <form method="post" action="form.php" onsubmit="script"> • <label for="yourName">Name: </label> • <input type="text" name="yourName" id="yourName"> • <br><br> • <input type="submit" name="submit" id="submit" value="Submit"> • </form> • 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.

41. onsubmitand the returnStatement 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 returnstatement in the onsubmit event handler. • You want this statement to return trueif 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.

42. onsubmitand the returnStatement 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_18/form_16_onsubmit_eventhandler.html

43. 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_18/form_17_form_validation.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/form_17_form_validation_full.html

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

45. Lecture 14 Please begin working on the LECTURE 14 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.