Accessing the formThe first step in being able to use user input is to access this input. Lets create a simple form:
This will display the text when the button is pressed. Thankfully this DOM works both in Netscape and IE. Notice I have called it by the form name, then the input name. This could quite easily be accomplished by using document.forms.elements.value, but this is more complicated, and harder to keep track of when pasting from one document into another. As a rule, use the names.
Using What You've AccessedNow that you've accessed the data, you'll want to be able to do something with it. Some of the simplest things are called validations - or making sure that the user entered what you wanted them to enter.
Making sure they entered numbers
There are many ways to do this, but here is one of the simplest. Change the
string to an integer, and see if the length is still the same - if it is, then
the input is a number, otherwise there's some funny characters in there. Here's
our new script - replace the old one with this one:
Don't worry about "InpValid" for the moment - it comes up later
I've converted the second string to a floating point integer, and then back to a string - this eliminates all the non-numeric characters. To check for an actual integer (i.e. whole numbers only) just substitute parseInt for parseFloat. Note the code to check for "NaN." Without this, three letter inputs would return as numbers. You can also use this to check that the user has entered in a certain number of digits - just include "&& newstring.length == 5" or whatever length you desire to the if statement. This is useful is say a ZIP number is needed.
Making sure they've entered a valid email address:
This is one thing that isn't fool-proof in any sense of the word - but it does stop people from entering "myemail" or some rubbish in the box - and hopefully, if they do this, they will get a fright and actually put in their real e-mail address. There are longer ways of validating e-mails, like searching for valid characters, but this is a simple solution that works on a basic level - I'll leave you to extend this code.
What I'm going to do here is to search the input for the character "@" which all e-mail addresses have in them - and make sure it is not next to a space, or the end or beginning of the line. Of course you can still enter in silly e-mail addresses, but at least it forces the user to enter something resembling an e-mail address.
We're going to have to use the regExp object and the search command - for
more information see http://www.webreference.com/js/column5/regular.html.
As you can see, I've added a new input box to my form and called it
"inputtwo," but you can change this, or just reuse the previous one.
The final thing to do is to actually submit your form. Add this code to the
end of the function:
The check for InpValid ensures that the form is not submitted if
there were mistakes in it.
Note that this action is whatever you would normally have as the action="" in the form.
Revised: January 26, 2001