Telephone mask not working with maskedinput

Question

I am not getting the mask to show up when I am typing a number like it shows on their demo. I am using gem 'maskedinput-rails'.

My code is:

<div class="form-group">
  <label class="control-label col-sm-5" for="phone">Phone Number:</label>
  <div class="col-sm-7">
    <%= f.telephone_field :phone, class: 'form-control', value: number_to_phone(@appointment.phone, area_code: true) %>
  </div>
  <script> 
    jQuery(function($){
    $("#phone").mask("(999) 999-9999");
    });
  </script> 
</div>

Answer 1

As vee points out, the problem is with your selector. Once you have loaded your page in the browser, you can simply check the source to see what the ID of the text field is. That said, if you did not change FormBuilder configuration, it should be something like #model_attribute, so in your case #appointment_phone. So:

<script> 
  jQuery(function($){
    $("#appointment_phone").mask("(999) 999-9999");
  });
</script>