DAY - 20
Using Selection Lists
List boxes let you pick
the item you want out of a multiple-choice box. The listbox itself is created
with the <SELECT> tag, and the items inside it are created by one or more
<OPTION> tags. You can have any number of <OPTION> tags in a list.
The list is terminated with a </SELECT> tag.
The list can appear with
many items showing at once, or it can appear in a drop-down box -- normally you
see one item at a time, but click to see more. The markup for the two styles is
identical, except for the optional SIZE attribute. Leave off SIZE to make a
drop-down box; use SIZE to make a list box of the size you wish.
Use the selectedIndex
property to test which option item is selected in the list, as shown in the
following example. The item is returned as an index value, with 0 being the
first option, 1 being the second, and so forth (if no item is selected the
value is -1).
Listing 6. form_select.html
<HTML>
<HEAD>
<TITLE>List Box Test</TITLE>
<SCRIPTLANGUAGE="JavaScript">
functiontestSelect(form){
alert(form.list.selectedIndex);
}
</SCRIPT>
</HEAD>
<BODY>
<FORMNAME="myform"ACTION=""METHOD="GET">
<INPUTTYPE="button"NAME="button"Value="Test"onClick="testSelect(this.form)">
<SELECTNAME="list"SIZE="3">
<OPTION>This is item 1
<OPTION>This is item 2
<OPTION>This is item 3
</SELECT>
</FORM>
</BODY>
</HTML>
If you want the text of
the selected list item instead of the index, use this in the testSelect
function:
functiontestSelect(form){
Item=form.list.selectedIndex;
Result=form.list.options[Item].text;
alert(Result);
}
Other events you can trigger within a form
I've used the onClick
event handler in all of the examples because that's the one you are most likely
to deal with in your forms. Yet JavaScript supports a number of other event
handlers as well. Use these as the need arises, and the mood fits. In Navigator
2.x The event handlers used with form object are:
·
onFocus -- an event is triggered with a form object gets
input focus (the insertion point is clicked there).
·
onBlur -- an event is triggered with a form object
loses input focus (the insertion point is clicked out of there).
·
onChange -- an event is triggered when a new item is
selected in a list box. This event is also trigged with a text or text area box
loses focus and the contents of the box has changed.
·
onSelect -- an event is triggered when text in a text or
text area box is selected.
·
onSubmit -- an event is triggered when the form is
submitted to the server (more about this important hander later in the column).
Submitting the form to the server
In the examples above I've
limited the action of the form to within JavaScript only. Many forms are
designed to send data back to a CGI program runnong on the server. This is
referred to as submitting the form, and is accomplished using either of two
JavaScript instructions: the onSubmit event handler or the submit method. In
most instances, you use one or the other, not both!
·
Place the onSubmit event
hander in the <FORM> tag. This tells JavaScript what it should do when
the user clicks the Submit button (this is a button defined as
TYPE="submit").
·
Place the submit
instruction anywhere in your JavaScript. It can be activated by any action,
such as clicking a form button that has been defined with the onClick event
handler.
Using onSubmit
Here's an example
of using the onSubmit event handler to send mail. The onSubmit event
handler tells JavaScript what to do when the user clicks the Submit button:
call the mailMe() function, where additional mail fields are appended to a
mailto: URL. Navigator automatically opens a new mail window with the fields
filled in. Write the body of the message, and send the mail off to the
recipient.
Listing 7. onsubmit.html
<HTML>
<HEAD>
<TITLE>onSubmit Test</TITLE>
<SCRIPTLANGUAGE="JavaScript">
functionmailMe(form){
Subject=document.testform.inputbox1.value;
CC= document.testform.inputbox2.value;
BCC= document.testform.inputbox3.value;
location="mailto:jwedit@javaworld.com?subject="+Subject+"&Bcc="+
BCC+"&cc="+CC;
returntrue;
}
</SCRIPT>
</HEAD>
<BODY>
<FORMNAME="testform"onSubmit="returnmailMe(this.form)">Subject of message: <BR>
<INPUTTYPE="text"NAME="inputbox1"VALUE="This is such a great form!"SIZE=50>
<P>Send cc to: <BR>
<INPUTTYPE="text"NAME="inputbox2"VALUE=""SIZE=50><P>
Send blind cc to: <BR>
<INPUTTYPE="text"NAME="inputbox3"VALUE=""SIZE=50><P>
<INPUTTYPE="submit"><BR>
</FORM>
</BODY>
</HTML>
Using submit
In the next example
the submit method is used instead. The script is little changed,
except that the onSubmit handler is removed, and an onClick hander for a
renamed form button is added in its place. The submit() method replaces the
return true statement in the previous example. (Personally, I prefer the submit
method because it provides a little more flexibility. But either one will
work.)
Listing 8. submit.html
<HTML>
<HEAD>
<TITLE>test</TITLE>
<SCRIPTLANGUAGE="JavaScript">
functionmailMe(form){
Subject=document.testform.inputbox1.value
CC= document.testform.inputbox2.value
BCC= document.testform.inputbox3.value
location="/javaworld/cgi-bin/jw-mailto.cgi?jwedit@javaworld.com?subject="+Subject+"&Bcc="+
BCC+"&cc="+CC
document.testform.submit();
}
</SCRIPT>
</HEAD>
<BODY>
<FORMNAME="testform">
Subject of message: <BR>
<INPUTTYPE="text"NAME="inputbox1"VALUE="This is such a great form!"SIZE=50><P>
Send cc to: <BR><INPUTTYPE="text"NAME="inputbox2"VALUE=""SIZE=50><P>
Send blind cc to: <BR><INPUTTYPE="text"NAME="inputbox3"VALUE=""SIZE=50><P>
<INPUTTYPE="button"VALUE="Send Mail"onClick="mailMe()"><BR>
</FORM>
</BODY>
</HTML>
Validating form data using JavaScript
The World Wide Web
"grew up" when they added the ability to display forms. In the days
before forms, the Web was only mildly interactive, with just hypertext links to
take readers from location to location. Forms allow users to truly interact
with the Web. For example, readers can specify search queries using a simple
one-line text box.
The typical form as used
on a Web page consists of two parts: the form itself, which is rendered in the
browser, and a CGI script or program located on the server. This script
processes the user's input. While it's not exactly rocket science, a stumbling
block in creating great Web forms is writing the CGI program. In most cases
these programs are written in Perl or C, and can be a bother to implement and
debug. A primary job of the CGI program is to validate that the reader has
provided correct data, and this can requires pages of code.
JavaScript changes that.
With JavaScript you can check the data provided by the reader before it's ever
sent to the CGI program. In this way the CGI program can be kept to a bare
minimum. And, because the data is only sent after it has been validated, the
server need not be bothered until the form entry is known to be good. This
saves valuable server resources.
Most form validation
chores revolve around basic data checking: does the user remember to fill in an
box? Is it have the right length? Does it contain valid characters? With most
forms you can readily answer these questions with a small handful of validation
routines.
A typical validation
routine is determining if an input box contains only numeric digits, shown
below. If the entry contains non-numeric characters, you can ask the user to
enter the correct data. A ready-made routine for this is the isNumberString
function, which returns the value 1 if the string contains only numbers, and 0
if it contains any non-numeric characters. To use it, provide the data string
as the parameter. The value returned by the function tells you if the data is
valid.
Listing 9. valid_simple.html
<HTML>
<HEAD>
<TITLE>Test Input Validation</TITLE>
<SCRIPTLANGUAGE="JavaScript">
functiontestResults(form){
TestVar=isNumberString(form.inputbox.value)
if(TestVar==1)
alert("Congratulations!
You entered only numbers");
else
alert("Boo! You entered a
string with non-numbers characters");
}
functionisNumberString(InString){
if(InString.length==0)return(false);
varRefString="1234567890";
for(Count=0;Count<InString.length;Count++){
TempChar=InString.substring(Count,Count+1);
if(RefString.indexOf(TempChar,0)==-1)
return(false);
}
return(true);
}
</SCRIPT>
</HEAD>
<BODY>
<FORMNAME="myform">
Enter a string with numbers only:
<INPUTTYPE="text"NAME="inputbox"VALUE="">
<INPUTTYPE="button"NAME="button"Value="Click"onClick="testResults(this.form)">
</FORM>
</BODY>
</HTML>
Hi, I am Venkatesh sir da. Excellent work by you. Do continue your efforts like this.
ReplyDeleteThanks sir keep your blessings to me.
DeleteWow sir ! This is too Good.
ReplyDeleteThanks dear,
DeleteYou also tell your problems regarding the cits syllabus i will try to solve it.
Wow sir ! This is too Good.
ReplyDeleteThanks dear,
DeleteYou also tell your problems regarding the cits syllabus i will try to solve it.