CODEWITHSUNDEEP
javascriptajax
Limey
Limey

Reputation: 2772

onkeyup event stops onchange ajax event from firing

So I have a an AJAX call on the onchange event of a text box and a very simple mask function (to add dashes to an SSN) on the onkeyup event. Both of these functions work fine on thier own, however, if the mask inserts a dash and then i move off the text box, the onchange event will not fire.

Anyone have any ideas of why? My guess is that by changing the value with the mask function, the text box no longer thinks anything has changed.

Thanks

SSN: <input id="SSN" maxlength="11" size="8" onchange="validateSSN();" onkeyup="mask()">
<span id="SSNnote"></span>

<script type="text/javascript">

function validateSSN(){
    var cfc = new myajax();
    cfc.setCallbackHandler(function(AjaxResults) {UpdateValidationNotes('SSNnote', AjaxResults);});
    cfc.ValidateSSN(document.getElementById("SSN").value);
}

function mask(){

    var temp = document.getElementById("#WhichName#").value;
    var e = window.event;
    if (e.keyCode == 189){

        document.getElementById("SSN").value = temp.substring(0,temp.length-1);
        return false;
    }

    if ( temp.length == 3 || temp.length == 6)
        if (e.keyCode != 8)
            document.getElementById("SSN").value = document.getElementById("SSN").value + '-';

}

Upvotes: 1

Views: 2077

Answers (2)

humrahimcs
humrahimcs

Reputation: 11

JavaScript Function:

<script type="text/javascript">
  function mask(str, textbox, loc, delim) {      
    var locs = loc.split(',');

    for (var i = 0; i <= locs.length; i++) {
      for (var k = 0; k <= str.length; k++) {
        if (k == locs[i]) {
            if (str.substring(k, k + 1) != delim) {
                str = str.substring(0, k) + delim + str.substring(k, str.length)
            }
        }
      }
    }
    textbox.value = str
  }
</script>

Write this Code in body Tag:

<label class="label">Social Security Number: *</label>
<input type="text" size="15" name="social_security_number" class="input"
    id="txtsocial_security_number"  runat="server" 
    onKeyUp="javascript:return mask(this.value,this,'3,6','-');"
    onBlur="javascript:return mask(this.value,this,'3,6','-');" maxlength="11">

This will result in this format: 797-97-9797

Upvotes: 1

peirix
peirix

Reputation: 37741

Yes, you are right, the onchange won't fire if you change the value of the box using javascript. So you need to call the validateSSN() manually inside your mask-function.

Upvotes: 3

Related Questions