Web Analytics Made Easy - StatCounter onchange event not firing while tabbing out of text box - CodingForum

Announcement

Collapse
No announcement yet.

onchange event not firing while tabbing out of text box

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    onchange event not firing while tabbing out of text box

    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. .................
    Tags: None
  • #2
    Try onblur instead of onchange. Seems to work the way you want it to:
    Code:
    <input type="text" name="checking" id="checking" value="" onblur="checkTextField(this)" />

    Comment

    • #3
      Just wanted to explain a bit more on onChange event. This event only fires when user type something into your textbox.
      so happy, so cool

      http://coolersport.info

      Comment

      • #4
        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
        Code:
        .....
function valid(f){
if(f['checking'].value==''){
alert('Please fill the requested fietds!");
f['checking'].focus();
return false
}
}
.........
<form action="" onsubmit="return valid(this)">
...........
        KOR
        Offshore programming
        -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

        Comment

        • #5
          Got it working ..........

          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. ..............

          Comment

          Previous template Next
          Working...
          X