how to mask textbox after ajax success

Question

I am returning values from the database after checking if it has value. If it has a value, it will be displayed in my textbox. But I want it to be masked with the format of (000-000-000-000), apparently, it is not working. But with normal input, the mask is working just fine. It's just that after success, it does not work anymore. Any help will be fine.

My code:

//..start of ajax code....
success: function(result) {
  console.log(result);
  if (result != "") {
    $("#tin").mask("000-000-000-000");
    $("#tin").val(result);
  }
}

Answer 1

The mask plugin formats the input text when typing (exactly oninput event )

After setting the value with ajax the format will not be applied to this last (because of the onchange event not oninput ) .

So to workaround this just trigger the input event after setting the value using the jQuery trigger() function.

Like below :

success: function(result) {
  console.log(result);
  if (result != "") {
    $("#tin").unmask().mask("000-000-000-000");
    $("#tin").val(result).trigger("input");;
  }
}

You can see the Sample Fiddle example here Link to fiddle