CODEWITHSUNDEEP
javascriptjqueryhtmlformsevents
Oliver Spryn
Oliver Spryn

Reputation: 17348

jQuery Listen For All Text Input Changes

I have an input element within a form which I would like to be able to extract its value when the value changes. Take a look at this Fiddle: http://jsfiddle.net/spryno724/WaBzW/1/.

By using the change event, I am able to display the value from the text input when the input looses focus. However, the value does not update when the form is reset or when JavaScript clears the value of the text input.

Is there a specific event that I can listen for which will be dispatched when any change is made to a text input control?

I'd like to avoid work-arounds, such as listening for when the form is reset, or when the clear button is pressed. This is a simplified example of what my application does, and it will get crazy pretty fast if I try to do all of that.

Thank you for your time.

Upvotes: 10

Views: 36881

Answers (4)

Raaghu
Raaghu

Reputation: 2014

Override val method of jQuery

HTML

<input id='myInput' name='myInputField' value='v1'>

JS

var myInput = $('#myInput');

//this will not trigger the change event
myInput.val('v2');

//override val method
var oldVal = myInput.val;
myInput.val = function(value){
   var returnVal = oldVal.call(this,value);
   myInput.change();
   return returnVal;
}

// this will trigger the change event
// myInput.val is overridden
myInput.val('v3');

NOTE this will work only if val method is called from myInput variable

Upvotes: 1

Oliver Spryn
Oliver Spryn

Reputation: 17348

This question is an exact duplicate of another. See the answer with the highest number of up-votes as the answer to my question:

JS Events: hooking on value change event on text inputs

Upvotes: 2

Johnny Mnemonic
Johnny Mnemonic

Reputation: 187

Try 

$('#input').live('change',function() {         })

Upvotes: -1

thecodeparadox
thecodeparadox

Reputation: 87073

$(document).ready(function() {
    $('input.clear').click(function() {
        $('input.input').val('');
        $('p.display').text('The value of the text input is: ');
    });

    $('input.input').on('keyup change', function() {
       $('p.display').text('The value of the text input is: ' + $(this).val());
    });
})​

DEMO 1

Probably this solution may help you:

$(document).ready(function() {
    $('input.clear, input[type=reset]').on('click', function() {
        $('input.input').val('').change();
        $('p.display').text('The value of the text input is: ');
    });

    $('input.input').on('keyup change', function() {
        $('p.display').text('The value of the text input is: ' + $(this).val());
    });
});​

DEMO 2

Upvotes: 13

Related Questions