| home / programming / javascript / forms |
 
[next] |
|
|
Have you ever wished to be able to create a small application on your Web site that would interact with the viewer, or wished to make sure that form input actually contained something worthwhile rather than just being a blank waste of space after someone just hit submit? Well, JavaScript, combined with a little DHTML can provide a solution to these problems, and introduce many great cool features to add an extra little "something" to your site.
In this article I'll show how to use JavaScript to access forms, how to manipulate data, and finally how to create a couple of small applications to show how its done. This is not meant to be a JavaScript tutorial, it assumes you have a basic understanding of JavaScript. Extensive knowledge is not necessary.
<form name="formone" onsubmit="showData()" action=">;
<input name="inputone" type="text">
<input type="submit" value="Show">
</form>
<script language="JavaScript">
<!--
function showData() {
alert(document.formone.inputone.value);
}
//-->
</script>
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:
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.
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.
The final thing to do is to actually submit your form. Add this code to the
end of the function:
Note that this action is whatever you would
normally have as the action="" in the form.
| home / programming / javascript / forms |
[next] |
| ||||||||||||||||||||
