CODEWITHSUNDEEP
javascriptjqueryevents
MattiasH
MattiasH

Reputation: 423

Check if textbox goes empty after having a value without submitting form or pressing outside of the textbox

I have a currency exchange in my backend, I post data from my textbox to the currency exchange using ajax and view the exchanged value in a label, which is otherwise hidden.

The problem is, if I enter a value in the textbox, and then erase the value from the textbox, the latest value is still there ( I want to hide the label again when the textbox is empty )

This is the code I've tried so far:

    $('#transferAmount').on('change',function () {
    var amount = $('#transferAmount').val();

    if (amount.length < 1 || amount === ""){
    $('#amountExchangedHidden').hide();
}

});

I've tried with "on-input" aswell, but it didn't work. Does anyone have a good solution to this?

Upvotes: 0

Views: 56

Answers (2)

SanjeevD
SanjeevD

Reputation: 56

Use blur Event instead of Change 

    $(function)  {
              $('#transferAmount').on('blur',function () {
                    var amount = $('#transferAmount').val();

                      if (amount.length < 1 || amount === ""){
                      $('#amountExchangedHidden').hide();}

             });
});

Upvotes: 0

Rayon
Rayon

Reputation: 36609

Use input event instead of change event as change event handler will only be invoked once focus in the input field is lost.

The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed.

$('#transferAmount').on('input', function() {
  var amount = $(this).val();
  $('#amountExchangedHidden').toggle(!!amount.length);
}).trigger('input'); //`.trigger` to invoke the handler initially
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id='transferAmount'>
<input type="text" id='amountExchangedHidden'>

Upvotes: 2

Related Questions