CODEWITHSUNDEEP
jquery
temperature
temperature

Reputation: 3

JQuery clear $(this) object

I am trying to prefill the phone number fields with format for different countries US,Canada(xxx) xxx-xxxx and for rest of the countries as +xxxxxxx.The problem here is when i change country the logic does not seem to be working since the Jquery object is holding previous value.

JSFIDDLE

$(document).ready(function($) {
  $('#country').on('change', function() {

    if (this.value == 'US' || this.value == 'CA') {

      $('#C_BusPhone')
      .keydown(function(e) {

        var key = e.charCode || e.keyCode || 0;

        $phone = $(this);

        if (key !== 8 && key !== 9) {
          if ($phone.val().length === 4) {
            $phone.val($phone.val() + ')');
          }
          if ($phone.val().length === 5) {
            $phone.val($phone.val() + ' ');
          }
          if ($phone.val().length === 9) {
            $phone.val($phone.val() + '-');
          }
        }
        return (key == 8 ||
          key == 9 ||
          key == 46 ||
          (key >= 48 && key <= 57) ||
          (key >= 96 && key <= 105));
      })

      .bind('focus click', function() {
        $phone = $(this);

        if ($phone.val().length === 0) {
          $phone.val('(');
        } else {
          var val = $phone.val();
          $phone.val('').val(val);
        }
      })

      .blur(function() {
        $phone = $(this);

        if ($phone.val() === '(') {
          $phone.val('');
        }
      });

    } else {

      $('#C_BusPhone')
      .keydown(function(e) {
       if ($(this).val().indexOf("+") === -1) {
          $(this).val("+" + $(this).val());
        }
      })

    }


  });
});

Upvotes: 0

Views: 222

Answers (2)

epascarello
epascarello

Reputation: 207511

You just keep on adding events, they do not get overwritten. So you need to manually remove the event. Since you are using bind() it would be unbind().

$('#C_BusPhone').unbind("keydown");

Note that per official jQuery documentation, for 1.7+ using on() and off() is preferred over bind() and unbind().

Another option is just to attach one event and do the logic check inside of what code to run.

Upvotes: 1

DIEGO CARRASCAL
DIEGO CARRASCAL

Reputation: 2129

js code:

$(document).ready(function($) {
$('#country').on('change', function() {

  $('#C_BusPhone').val("");
  alert($("#country").val());
});

$('#C_BusPhone').keydown(function(e) {

    var key = e.charCode || e.keyCode || 0;
    var phone = $('#C_BusPhone');

    if ($("#country").val() == 'US' || $("#country").val() == 'CA') {
        console.log($("#country").val());

        if (key !== 8 && key !== 9) {
          if (phone.val().length === 4) {
            phone.val(phone.val() + ')');
          }
          if (phone.val().length === 5) {
            phone.val(phone.val() + ' ');
          }
          if (phone.val().length === 9) {
            phone.val(phone.val() + '-');
          }
        }

       if (phone.val().length === 0) {
          phone.val('(');
       } 
       else {
          var val = phone.val();
          phone.val('').val(val);
       }

     } 
     else {

       if (phone.val().indexOf("+") === -1) {
          phone.val("+" + phone.val());
       }
     }
  });
});

Upvotes: 0

Related Questions