10

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.

Improve this question
6
  • 1
    I was just working on this same problem today. The jQuery .on event is supposed to handle this but I couldn't make it work. $("#ElementID").on("input change propertychange paste keyup", handler)... Commented May 28, 2012 at 3:43
  • Hmm... I've never used .on() before. I'll look into it Commented May 28, 2012 at 3:44
  • I've used .live() before but that has been deprecated as of version 1.7 and .on() is now the preferred method Commented May 28, 2012 at 3:45
  • @AlfalfaStrange see my comment to Johnny on the .live() event Commented May 28, 2012 at 3:50
  • 1
    possible duplicate of JS Events: hooking on value change event on text inputs Commented May 30, 2012 at 20:20

4 Answers 4

Reset to default
13 
$(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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thank you, but hitting reset will not update the text above the input.
What about when data is set to the value of the input from another function? .keyup won't cover that
I appreciate your input, but I had also mentioned that I would "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."
I see. It does work. However, resetting the form doesn't update the text above the input.
@spryno724 Reset doesn't work but clear does.. what is reset supposed to do?
|
2

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

Improve this answer

1 Comment

You're meant to (vote to) close the question as a duplicate then, not post an answer.
1

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

Improve this answer

Comments

-1

Try 

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

6 Comments

.live() is whenever there are new elements which are dynamically added to the page and must have events attached to them: api.jquery.com/live.
Do NOT use .live() it has been deprecated as of version 1.7
I know what you've said is true about it being deprecated. Strangely I had a situation where I wanted to change the background color of an input when it's value changed, and using .live('change'... worked while using .on('change'... didn't work - using jquery 1.7.3. Any idea why?
Yeah I have had the same problem, I think I just suck at jQuery
@JohnnyMnemonic you need to pass in the selector context to on, otherwise it will just work as if you are using .change() .on( events [, selector] [, data], handler(eventObject) )
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.