Form Let's say you have a form like this:
<form name="aa">
<input type="text" size="10"
value="" name="bb"><br>
<input type="button"
value="Click Here"
onclick="alert(document.aa.bb.value)">
</form>
Notice that we gave the names to the form and the element. So JavaScript
can gain access to them.
onBlur If you want to get information from users and want
to check each element (ie: user name, password, email) individually,
and alert the user to correct the wrong input before moving on,
you can use onBlur. Let's see how onblur works:
<html><head><script>
function emailchk()
{
var x=document.feedback.email.value
if (x.indexOf("@")==-1)
{
alert("It seems you entered an invalid email address.")
document.feedback.email.focus()
}
}
</script></head><body>
<form
name="feedback">
Email:<input type="text" size="20" name="email"
onblur="emailchk()"><br>
Comment: <textarea name="comment" rows="2" cols="20">
</textarea><br>
<input type="submit" value="Submit">
</form>
</body></html>
If you enter an email address without the "@", you'll get a alert
asking you to re-enter the data. What is: "x.indexOf("@")==-1"?
This is a method that JavaScript can search every character within
a string and look for what we want. If it finds it will return the
position of the char within the string. If it doesn't, it will return
-1. Therefore, "x.indexOf("@")==-1" basically means: "if the string
doesn't include @, then:
alert("It seems you entered an invalid email address.")
document.feedback.email.focus()
What's focus()? This is a method of the text box, which
basically forces the cursor to be at the specified text box.
onsubmit Unlike "onblur", "onsubmit" handler is inserted
inside the <form> tag, and not inside any one element. Lets
do an example:
<script>
<!--
function validate()
{
if(document.login.userName.value=="")
{
alert ("Please enter User Name")
return false
}
if(document.login.password.value=="")
{
alert ("Please enter Password")
return false
}
}
//-->
</script>
<form name="login" onsubmit="return validate()">
<input type="text" size="20" name="userName">
<input type="text" size="20" name="password">
<input type="submit" name="submit" value="Submit">
</form>
Note:
if(document.login.userName.value==""). This means "If
the box named userName of the form named login contains nothing,
then...". return false. This is used to stop the form from submitting.
By default, a form will return true if submiting. return validate()
That means, "if submiting, then call the function validate()".
Protect a file by using Login Let's try an example
<html><head>
<SCRIPT Language="JavaScript">
function checkLogin(x)
{
if ((x.id.value != "Sam")||(x.pass.value !="Sam123"))
{
alert("Invalid Login");
return false;
}
else
location="main.htm"
}
</script>
</head><body>
<form>
<p>UserID:<input type="text" name="id"></p>
<p>Password:<input type="password" name="pass"></p>
<p><input type="button" value="Login"
onClick="checkLogin(this.form)"></p>
</form>
</body></html>
"||" means "or", and "!=" indicates "not equal". So we can explain
the script: "If the id doese not equal 'Sam', or the pass doese
not equal 'Sam123', then show an alert ('Invalid Login') and stop
submiting. Else, open the page 'main.htm'".
|
