Coderap Coderap - 1 year ago 91
jQuery Question

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 === ""){


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

Answer Source

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();
}).trigger('input'); //`.trigger` to invoke the handler initially
<script src=""></script>
<input type="text" id='transferAmount'>
<input type="text" id='amountExchangedHidden'>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download