43
BIT116: Scripting Lecture 16 Wednesday, March 5 th , 2014 Instructor: Craig Duckett [email protected] Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp. 592-597, 608-617

Wednesday, March 5 th, 2014 Instructor: Craig Duckett [email protected] Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

Embed Size (px)

Citation preview

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

BIT116: ScriptingLecture 16

Wednesday, March 5th, 2014

Instructor: Craig Duckett

[email protected]

Scripting Tables and FormsMurach - Chapter 17Scripting Tables and Formspp. 592-597, 608-617

Page 2: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

2

Scripting Tables

Page 3: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

3

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

Page 4: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

4

Scripting Tables (Using JavaScript)

Table Template• http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_00_template.htmlAdding a Row with appendChild() Method• http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_01_create_1.htmlAdding a Row with insertRow() Method• http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_01_create_2.htmlDeleting a Row with deleteRow() Method (Top)• http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_02_delete_1.htmlDeleting a Row with deleteRow() Method (Bottom)• http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_02_delete_2.htmlReorder Rows• http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_03_reorder_rows.htmlShuffle Rows• http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_04_shuffle.htmlSort Rows• http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/table_05_sort.htmlSort Rows (Book Example)• table_sort.zip (ZIPPED)

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

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

Page 6: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

6

Scripting Forms

Page 7: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

7

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.

Page 8: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

8

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

Page 9: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

9

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.

Page 10: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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

Page 11: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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_16/form_01_elements.html

Page 12: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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.

Page 13: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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

Page 14: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<form name="infoForm">Name: <input type="text"><br><input type="submit">

</form>

Page 15: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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_16/form_03_names.html

Page 16: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<form id="infoForm">Name: <input type="text"><br><input type="submit"></form><p><script>

var formLength = document.getElementById("infoForm").length;document.write("The form has " + formLength + " elements.");

</script></p>

http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_04_id.html

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

17

Using the Properties and Methods of the Form Object

Page 18: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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.

Page 19: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

19

Page 20: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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_16/form_05_action_property.html

Page 21: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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]

Page 22: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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

Page 23: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

23

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_16/form_06_elements_01.html

Page 24: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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.

Page 25: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

25

Page 26: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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() {

var yesOrNo = 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_16/form_07_checked_1.html

Page 27: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

27

The defaultChecked Property

The defaultChecked property is also a Boolean value of true or false. The value depends on whether thecheck 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_16/form_08_defaultchecked.html

Page 28: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

28

The defaultValue Property

You use the defaultValue property with text boxes and text areas. It holds the value of the default valueset 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() {

var urlBox = document.getElementById("favURL");urlBox.value = urlBox.defaultValue;

}</script>

http://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_09_defaultvalue.html

Page 29: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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_16/form_10_form_property.html

Page 30: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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_16/form_11_name_property.html

Page 31: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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

Page 32: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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

Page 33: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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.

Page 34: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

<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_16/form_14_reset_method.html

Page 35: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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):

<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_16/form_15_submit_method.html

Page 36: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

36

Validating Forms

Page 37: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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.

Page 38: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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:

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

Page 39: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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.

Page 40: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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

Page 41: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_16/form_17_form_validation_full.html

Page 42: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

42

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

Page 43: Wednesday, March 5 th, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Scripting Tables and Forms Murach - Chapter 17 Scripting Tables and Forms pp

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.

Lecture 16