<%response.buffer=True%> <% function rw(str) response.write str end function function html(str) response.write(server.HTMLEncode(str)) end function function url(link,str) response.write "" & str & "" end function %> [CTN162:lessons | topics]
[CTN162: Lessons & Topics]

Day 12: String Handling/Book Object 3/Basic Forms

Strings: Strings are any series of "alphanumeric" characters treated as a separate entity. Strings are objects themselves in JavaScript. We can access certain methods (actions) and properties of strings simply by calling a variable that is the name of the string, with the dot syntax. There are several string methods in chapter 13 of the book, but we will only cover the ones that are of most use to us.

We will need to have an understanding of string handling to be able to do form validation, i.e., to check a form that a user is filling out for completeness and accuracy. We can also use form handling to manipulate data, for example, to capitalize names, etc.

Of the string methods, we have already worked with the highly useful "split" method, which creates an array by splitting a string on a particular character (Day 11). Here we declare a string, then split the string into an array. Note that the string in this case is a comma separated string of names. Each name would be read into a separate element of the array:

var myString = "Bob,Steve,John";
var nameArray = myString.split(","); //splitting up the string on the comma

In this example, nameArray[0] would be "Bob", nameArray[1] would be "Steve" and nameArray[2] would be "John". We can then loop through the array and perform actions on each element of the array.

There is one important property of string objects we will use repeatedly, the "length" property. To be able to navigate around (and manipulate) a string, we need to be able to determine how many characters are in the string. We do this with the length property:

var myString = "Tyrannosaurus";
var dinoLength= myString.length; //returns 13, the number of characters in the word

Note the number returned is the count of the number of characters in the string, starting with the number one. This can cause some confusion when we start to compare zero based arrays, and one based lengths, but we will adapt to this anomaly! Remember how we have already used "array.length - 1" when looping through an array? This was for the same reason. Incidentally, some string methods & properties we examine (like "length") are used for arrays and strings. This could be because a string is nothing but an "array" of characters! (like beads on a chain)

Here are the main methods of the string object, followed by a quick example of its use:

charAt() Determines which character resides at a particular position in a string:
var pos = myString.charAt(0); //shows first position in the string

indexOf() Returns the position of the first occurence of a string inside the string (returns -1 if not found):
var pos = myString.indexOf("http://"); //if myString includes "http://" the return would be zero.

lastIndexOf() Returns the position of the last occurence of a string inside the string (returns -1 if not found):
var pos = myString.lastIndexOf("g"); //if myString is "eggs" the return would be 2 (third character).

NOTE: Both indexOf() and lastIndexOf() accept an optional second parameter as the starting point of the search. The correct syntax in that case would be: lastIndexOf("http://",22) to search starting at 23rd character. Remember this is zero based.

substring() Pulls out a partial string from the original string. starts at first parameter, first char LEFT in the string is the second parameter:
var newString = myString.substring(0,4); //if myString is "The Cat", newString would be "Cat". If no second parameter, returns remainder.

slice() A more flexible version of subString(). Can accept negative values, otherwise works the same as substring:
var newString = myString.slice(-3,-1); //if myString is "The Cat", newString would be "Ca", starting from end of string, working backward.

substr() Similar to slice, but second parameter is the LENGTH of sub string.
var newString = myString.slice(1,2); //if myString is "The Cat", newString would be "he"

toUpperCase() Changes entire string to upper case characters.
var newString = myString.toUpperCase(); //if myString is "The Cat", newString would be "THE CAT"

toLowerCase() Changes entire string to lower case characters.
var newString = myString.toUpperCase(); //if myString is "The Cat", newString would be "the cat"

NOTE: Both "toUpperCase()" and "toLowerCase()" change the ORIGINAL string, as well!

To demonstrate the capabilities ofthe various string handling functions, please see (and work with) the following form. Example: String Test Form

This form will allow you to type in various strings, and see dynamic output to a new window how the different string functions operate, and what they return. Refer also to chapter 13 of our book, for more info on string functions.

Book Object, Part 3: We have expanded the capabilites of our book object, and given it 2 new methods (actions). The new methods allow a user to "Filter" through the books, and only show books with a given "rating" or higher. A loop is created, and the array of book objects are matched one by one to the value sent in via the form. If a rating is greater than, or equal to the value submitted via the form, that book is shown. The "Filter" method could be expanded upon, and other means of filtering the data could also be used.

The other method is a simple "List" of all the books available via the object. This is similar to the "Filter", except all books are displayed, no filtering is applied. Example: Book Object, version 3

View the source of this page, and also not the "toggle" between red and green, where the color is alternating. This is useful code that could be used separate from the object.

Form Fundamentals: We reviewed the fundamental form elements, and targeted a test page, where we could see the output displayed, as it would be passed to the server. This tool allows us to see if all of our form elements are functional, and the manner in which the data is passed to the server.

For our purposes, we will use 2 "form handlers" to help us test our forms. A "form handler" is any server side script that "handles" or otherwise reacts to the data sent to it, via the form. The first one (mentioned above) shows the "name" we have given to the form element, coupled with the "value" sent in, or typed in by the user. This is identical to the concept of name/value pairs discussed earlier in the Querystring. To target the "form tester" script (written in ASP) use a similar line of code, as your <form> tag:

<form action="http://www.newmanic.com/formtest.asp" method="post">

We can also use a different form handler to send user data to a pre-arranged email address. Our target email, and other pertinent information is included in the form in "hidden" form tags, specifying the Email, Subject, and other info to identify the source of the form info, as it arrives in our email. To use this form handler, use this info in your <form> tag:

<form action="http://www.newmanic.com/formhandler.asp" method="post">

More complete directions are available at: Newmanic Forms Page

Our intention is to allow you to continued free access to the form tester, and form handler pages, as you continue to develop forms. Note, however, there is a shameless plug included on the bottom of each email address sent with the form handler!

Misc. Form notes: We covered a few oddities of form elements. With the form test page, we can see the default operation of a checkbox is to pass the data as a comma delimited (separated) string:

Cherry,Apple,Orange,Strawberry,Banana

Only items that were selected will be passed in this manner. If not boxes are checked, no data is sent.

With text boxes (input type="text"), it is a good idea to limit each box with the "maxlength" property of the text box. This will allow only the selected number of characters into a text box, and will not allow a hacker to send a huge amount of data in an uncontrolled text box. We can also use the "size" in a text box to declare the visible size of the text box itself, however maxlength

It is also a good idea to allow a large enough area for the user to adequately place info into the text box, etc. An "address" text box would be longer than a "First Name" text box. However, even the "First Name" textbox needs to be long enough to accomodate any possible first name.

We created a test form, with all of the common form elements on it, and used it to test with the form tester: Example Working Form

Back To Top

 
2000, 2001, 2002 webdeavor, INC. & newmanic,   All rights reserved