I was trying to write a script that checks the second text field if it has the same data as that in the first field.When the user enters in the second text field the script keeps telling him if he is going right.If he makes a mistake immediately the script points out by setting the label
equal to "emails do not match".
Bu i have not been successful till now.
script :
window.onload = startChecker;
function startChecker() {
//while(true) {
if( document.getElementById("first_field").value != "" ) {
var idFromFirstField = document.getElementById("first_field").value;
if(idFromFirstField != document.getElementById("second_field").value ) {
document.getElementById("alert_message").value = "Incorrect Email ! ";
} else {
document.getElementById("alert_message").innerHTML = "Two emails match !";
}
}
//}
}
In case this is a HTML file :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="cross_checker.js">
</script>
<title>Untitled Document</title>
</head>
<body>
<form>
<label>Email<input type="text" id="first_field" /></label> <br /> <br />
<label>Verify your Email<input type="text" id="second_field" /></label>
<label id="alert_message" value="" style="color:#CC0000"></label>
<!--the above label outputs if the user is 开发者_Go百科entering the same id !--->
<br /> <br />
<input type="submit" value="submit" style="color:#CC0000"/>
</form>
</body>
</html>
Earlier i was trying to use an infinite while loop but that hangs the browser and sometimes the browser keeps fetching the page.
How can i improve this script so that i am able to instantly check if the user is going right or wrong ?
Add a keyup handler to the input element. In the HTML code, add onkeyup="startChecker();"
.
Using JavaScript, you can dynamically assign event handlers, in this way:
if(window.addEventListener) element.addEventListener("keyup", startChecker, true); //All major browsers
else if(window.attachEvent) element.attachEvent("onkeyup", startChecker);
else element.onkeyup = startChecker;
//Where element refers to the HTML element.
精彩评论