Basics of Java Script
- A practical approach to learning Javascript is to type in and tinker with a simple program that solves a practical, real world problem. An example of such a program is one ensuring that a user enters some text in an input field before her data is sent to a server. The following program illustrates this kind of validation. Type it into a plain text document and save it as "formVal.hmtl."
------------------------------------------------
<html>
<head>
<script type="text/javascript">
function validate(field)
{
if (field.value==null||field.value=="")
{
alert("This is a required field.");return false;
}
else
{
return true;
}//else
}// end of func validate
</script>
</head>
<body>
<form action="submit.htm" onsubmit="return validate(this.firstname)" method="post">
Name: <input type="text" name="firstname" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
-----------------------------------
That HTML page directs your browser to another, called submit.html. Enter this HTML code into another text document called "submit.html":
-------------------------------------------------
<html>
<head>
</head>
<body>
<P>
Thanks for registering.
</body>
</html>
--------------------------------- - Refer to the source code for the formVal.htm page. The <script> tag indicates that some Javascript code is starting here, as opposed to plain HTML.
The script uses one function, validate, that checks to see if the HTML element passed to it as an argument is blank. If it is, function validate outputs an error message and returns the value False. If the HTML element has some text in it, validate() returns the value True. The caller of function validate is the statement "onsubmit='return validate...,'" which is inside the <form> tag. When validate returns "false," the "onsubmit" event evaluates to "onsubmit='return false.'" This prevents the action, as shown in the <form action...> part, from being taken. When the user instead enters non-blank text, function validate returns True; onsubmit evaluates to "return True," which causes the <form> tag's action, the redirection to the web page "submit.htm," to be taken. - Notice the elements that the validate function accesses to do its job. In the "if ()" statement, it looks at the ".value" member of the HTML field passed to it. This accessing of a member of "field" shows object-oriented programming at work. Value is a member of the field object; object-oriented programming works with objects and their member functions and variables.
Validate a Form With Javascript
How It Works
The Validate Function
Source...