0

learning bootstrap 4 and trying to call the modal popup when the input on change event but not sure whether that will be a correct solution or not.

Once I delete the existing text from the input, that should trigger the modal automatically after the last text deletion. Currently, this is getting triggered once I click out of the input box. 

if ($("input[id$='CheckboxPhone']").is(":checked")) {
  $('.testing').on('change', function() {
    if ($(this).val().length < 1) {
      //call bootstrap modal, for testing we will call alert
      alert("test");
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <input type="text" id="testing" class="testing" value="2144566189" data-value="214-456-6189">

  <form class="form-test">
    <div class="checkbox m-l-20 m-t-sm-10">
      <input type="checkbox" id="customerServiceCheckboxPhone"             name="customerServiceCheckboxPhone" checked="checked" class="js-test valid">
      <label class="checkbox-check" tabindex="0" for="customerServiceCheckboxPhone"></label>
    </div>

    <div class="checkbox m-l-20 m-t-sm-10">
      <input type="checkbox" id="offersCheckboxPhone" name="customerServiceCheckboxPhone" checked="checked" class="js-test valid">
      <label class="checkbox-check" tabindex="0" for="offersCheckboxPhone"></label>
    </div>

    <div class="checkbox m-l-20 m-t-sm-10">
      <input type="checkbox" id="testCheckboxPhone" name="customerServiceCheckboxPhone" checked="checked" class="js-test valid">
      <label class="checkbox-check" tabindex="0" for="testCheckboxPhone"></label>
    </div>
  </form>
</body>

</html>
Kumar
  • 47
  • 6
  • The `change` event happens after a blur, not before (typically). If you want it to happen immediately on change use the `input` event instead – Taplar Mar 27 '20 at 17:04
  • @Taplar input event? I would recommend to use `on('keypress'` – Salmin Skenderovic Mar 27 '20 at 17:07
  • 1
    @SalminSkenderovic https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event – Taplar Mar 27 '20 at 17:08
  • @SalminSkenderovic also, keypress has been deprecated. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onkeypress – Taplar Mar 27 '20 at 17:09
  • @Taplar I have missed this. Thank you! – Salmin Skenderovic Mar 27 '20 at 17:09
  • @taplar but how do I know when the last character is deleted? because that's what my question is. When anyone checkbox is checked, and when i tried to delete the number, then it should show the modal/alert – Kumar Mar 27 '20 at 17:11
  • Your logic already has a val().length < 1 check for that – Taplar Mar 27 '20 at 17:12
  • An added side note; if this logic binds the event handler, if the user unchecks the checkbox, it is not going to automatically unbind the event handler. The event handler will still exist and execute. – Taplar Mar 27 '20 at 17:13
  • @Taplar, thanks, working. Can you write an answer so that I can close this question? – Kumar Mar 27 '20 at 17:41
  • It's already closed. – Taplar Mar 27 '20 at 17:42

0 Answers0