Toggle Function To Change Input Mask

Question

I am using the input mask from http://digitalbush.com/projects/masked-input-plugin/

<script type="text/javascript" src="jquery.maskedinput.min.js"></script>

<script type='text/javascript'>
$(window).load(function(){
$("#transaction_id").mask("(999) 999-9999");


$("#transaction_id").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;

        var first = $(this).val().substr( 0, 9 );

        $(this).val( first + '-' + lastfour );
    }
});
}); 

</script>

My input field:

<form role="search" class="navbar-form navbar-left" id="form2" name="form2" 
autocomplete="off" autocorrect="off" method="post" action="<?php echo $editFormAction; ?>">
<div class="form-group">
<label for="input">Scan Receipt, ID or Type Phone Number</label>
<div class="input-group">
<input type="text" name="transaction_id" id="transaction_id" class="form-control" 
placeholder="receipt, ID or phone" autofocus>
<input type="hidden" id="activity_id" name="activity_id" 
value="<?php echo $_GET['recordID']; ?>" />                                 
<input type="hidden" name="MM_insert" value="form2" />
<span class="input-group-btn">
<button type="submit" id="Submit" name="Submit" class="btn btn-default" 
onclick="this.disabled = true; this.value = 'Saving...';
this.form.submit();"><span class="glyphicon glyphicon-search"></span> Redeem Ticket</button>
</span>
</div>
</div>
</form>
</div>

My input field needs to take a 10-digit receipt number (e.g. W2GT7HR114) or a phone number in the form (999) 999-9999. Would like to toggle an input field when I need to input the phone number so the phone number input value has the phone input mask. Need some help with how to add the toggle button to show the input mask or hide. Would also like the placeholder to show as (999) 999-9999 when toggled vs "receipt, ID or phone". Any help would be appreciated.

the above link of maskedtextbox is not working, @user3258571 if you found new one then its good — Ajay2707

Marouen Mhiri Marouen Mhiri · Accepted Answer · 2016-08-05T20:37:58

I edited your example (please remenber: this not the solution - this may only a help as first step to reach your goals ):

$(document).ready(function() {

  $.mask.definitions['h'] = "[A-Z0-9]";
  $(".reciepid").mask("hhhhhhhhhh").attr('placeholder', 'W2GT7HR114');

  $('.toggle').click(function() {
    $("#transaction_id").toggleClass('reciepid phone');
    $("#transaction_id").val('');
    $(".reciepid").mask("hhhhhhhhhh").attr('placeholder', 'W2GT7HR114');
    $(".phone").mask("(999) 999-9999").attr('placeholder', '(999) 999-9999');
});

$("#transaction_id").on("blur", function() {
  var last = $(this).val().substr($(this).val().indexOf("-") + 1);

  if (last.length == 3) {
    var move = $(this).val().substr($(this).val().indexOf("-") - 1, 1);
    var lastfour = move + last;
    var first = $(this).val().substr(0, 9);
    $(this).val(first + '-' + lastfour);
  }
});
});

the HTML:

<div>
  <form role="search" class="navbar-form navbar-left" id="form2" name="form2" autocomplete="off" autocorrect="off" method="post" action="<?php echo $editFormAction; ?>">
    <div class="form-group">
    <label for="input">Scan Receipt, ID or Type Phone Number</label>
    <div class="input-group">
      <span class="toggle">toggle</span>
      <input type="text" name="transaction_id" id="transaction_id" class="form-control reciepid" placeholder="receipt, ID or phone" autofocus>
      <input type="hidden" id="activity_id" name="activity_id" value="<?php echo $_GET['recordID']; ?>" />
      <input type="hidden" name="MM_insert" value="form2" />
      <span class="input-group-btn">
      <button type="submit" id="Submit" name="Submit" class="btn btn-default" onclick="this.disabled = true; this.value='Saving...';this.form.submit();">
         <span class="glyphicon glyphicon-search"></span> 
         Redeem Ticket
        </button>
      </span>
     </div>
    </div>
  </form>
</div>

and a little bit of css :-)

.toggle {
  display: inline-block;
  background: grey;
  border-radius: 5px;
  border: 1px solid #000;
  padding: 5px;
}

and the jsFiddle : https://jsfiddle.net/sm4n6kkj/ (please check that you the Mask library is loaded - works on Firefox - but not chrome - this is not a problem because you have your library saved localy)

Toggle Function To Change Input Mask

1 Answers