PDA

View Full Version : onchange event not firing while tabbing out of text box

vivekrkv
09-27-2006, 07:04 PM
Hi friends :)...............,<br>

I have a problem where my onchange event is not firing at all. I have tried using both Firefox

1.5.0.7 and IE 6.0.2900.<br><br>


This is my code to verify that a text field has not been left blank:<br>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Check if the text field is empty</title>
<meta http-equiv="Content-Type" content="text/html"; charset="EN-US";>
<style type="text/css">
</style>

<script type="text/javascript">
<!-- script hiding starts

function checkTextField(field) {
alert("entered function: checkTextField.");
if ( isEmpty(field.value) ) {
alert("Field is empty");
}
else {
alert("Field is not empty and the value entered is: " + field.value + ".");
}
}

//General Function to check if the text field is empty.
function isEmpty(inputStr) {
if ( inputStr == "" ) {
return true;
}
else {
return false;
}
}
// script hiding ends -->
</script>

</head>
<body>

<form onsubmit="return false">
Enter/Not-enter something to check whether the field is empty:
<input type="text" name="checking" id="checking" value="" onchange="checkTextField(this)"

/>
<input type="text" name="nothing" id="nothing" />
</form>

</body>
</html>

<!-- PROBLEM
1.To validate if a text field is filled – when I tab out of that text field without entering any

value, it does not
fire the function. But when I fill in something and then tab out, it fires the function. And

then immediately after
this if I go back to that same field and delete everything and then tab out, then the function

fires and tells me that
there is no data in the field. Then immediately after this if I again go to that field and tab

out, then the function does
not fire. Its like this – the onchange event fires when data is entered, or when data is entered

and for 1 time after
that without data too. -->

Thanks in advance.
Cheers.
vivek. :).................
kansel
09-27-2006, 08:13 PM
Try onblur instead of onchange. Seems to work the way you want it to:<input type="text" name="checking" id="checking" value="" onblur="checkTextField(this)" />
dungsport
09-28-2006, 09:43 AM
Just wanted to explain a bit more on onChange event. This event only fires when user type something into your textbox.
Kor
09-28-2006, 11:12 AM
No. You misunderstood the onchange action. onchange will trigger a function when the element looses it's focus, so that you may also use onblur, but it will be exactly the same thing, and not very useful, as the user might simply not focus that textfield, so that there will be no onchange or onblur.

To check if the field is empty (to validadte the form, you should call a validate function onsubmit (which is a form's handler) not onchange or onblur, as in fact you want to prevet the submit action, not the onblur action

.....
function valid(f){
if(f['checking'].value==''){
alert('Please fill the requested fietds!");
f['checking'].focus();
return false
}
}
.........
<form action="" onsubmit="return valid(this)">
...........
vivekrkv
09-28-2006, 11:23 AM
Thanks kansel, onblur did it. I can't believe the solution was so easy.

And thanks dungsport, that tiny bit of info that only when a user types in something that onchange works, is just not obvious in all the books that I have read. They were all so casually using onchange for validating an empty field. Can't believe it.

And thanks a lot Kor, now I know the right way to get the job done.

Thanks for such a fast response.
Cheers.
Vivek. :)..............