catch .on('change) of textbox within modal

Question

I have a modal that contains a text box. I would like to allow the user to simply type in the box and, when their input meets the requirement (length 4), call a function. The issue is the .on('change') function only seems to be processed when you click somewhere in the modal, or close the modal.

I am using bootstrap 3.3.7 and jquery 3.1.1

$('#signInModal').modal('show');

$('#signInModal-passwordText').on('change', function() {
  //some diagnostic stuff
  $('#signInModal-failedSpan').show();
  $('#signInModal-failedSpan').html($(this).val());
  if ($(this).val().length == 4) {
    //alert('4');
    signIn($(this).val());
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="modal fade" tabindex="-1" role="dialog" id="signInModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Sign In</h4>
      </div>
      <div class="modal-body">
        <input id="signInModal-passwordText" type="password" class="form-control" />
        <span class="alert alert-danger" style="display: none;" role="alert" id="signInModal-failedSpan">Failed!</span>
      </div>
      <div class="modal-footer">
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

did you tried `on('input',` – Mohamed-Yousef Jun 07 '17 at 18:59 — Mohamed-Yousef, Jun 07 '17 at 18:59
on("keyup" is another one to try – mplungjan Jun 07 '17 at 19:04 — mplungjan, Jun 07 '17 at 19:04
I made you a snippet - next time do the same. – mplungjan Jun 07 '17 at 19:10 — mplungjan, Jun 07 '17 at 19:10

score 3 · Accepted Answer · answered Jun 07 '17 at 19:12

I would use onkeyup since change needs a blur in many browsers to trigger:

Diffrence between keyup keydown keypress and input events

function signIn(val) { alert(val)}
$('#signInModal').modal('show');

$('#signInModal-passwordText').on('keyup', function() {
  //some diagnostic stuff
  $('#signInModal-failedSpan').show();
  $('#signInModal-failedSpan').html($(this).val());
  if ($(this).val().length == 4) {
    signIn($(this).val());
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="modal fade" tabindex="-1" role="dialog" id="signInModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Sign In</h4>
      </div>
      <div class="modal-body">
        <input id="signInModal-passwordText" type="password" class="form-control" />
        <span class="alert alert-danger" style="display: none;" role="alert" id="signInModal-failedSpan">Failed!</span>
      </div>
      <div class="modal-footer">
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

score 0 · Answer 2 · answered May 15 '19 at 02:53

0

I know this question is a bit old, but this might help someone else.

You could have changed this line:

$('#signInModal-passwordText').on('change', function() {

to:

$('.modal').on('change', '#signInModal-passwordText', function() {

answered May 15 '19 at 02:53

Dario Zadro

1,143
2
13
23

catch .on('change) of textbox within modal

2 Answers2