jQuery onChange isn't triggering an event when text is entered into a form

Question

I have this simeple jQuery code:

$('#category_name').change(function() 
{
  alert('Handler for .change() called.');
  var category = $("#category_name").val();    
});

And this form:

    <form id="problem_categories" name="problem_category_form" method="post">
         <p>
         Category Name: <input type="text" size="50" name="category_name" id="category_name"></input>
         </p>                
         <p>
            <input type="hidden" id="category_problem_id" name="category_problem_id" value="<?php echo $problem_id; ?>" />

            <span class="error"   id="category_error" style="display:none"> Please Enter Valid Data</span>
            <span class="success" id="category_success" style="display:none"> Category Added Successfully!</span>

            <input type="submit" class="button" value="Add Category"></input>
         </p>
    </form>

But for some reason the jQuery does not fire when I enter text into the form field. Here is an example page where this can happen on the bottom right: http://www.problemio.com/problems/problem.php?problem_id=51

hmmm...lol really? :) I think it fires on submit. But not on change. I was thinking it was going to fire when the person types. So I can help them find the item they are looking for by looking up what they wrote at that point of the form. — GeekedOut
– GeekedOut, Commented Oct 17, 2011 at 21:55
maybe you need keyup event.. change only fires once you leave the element — Esailija
– Esailija, Commented Oct 17, 2011 at 21:57
Seems to work for me - note the change event only fires after the element loses focus — DJ.
– DJ., Commented Oct 17, 2011 at 22:01

Petah · Accepted Answer · 2011-10-17 21:56:58Z

2

Use keyup instead:

$('#category_name').keyup(function() 
{
  alert('Handler for .change() called.');
  var category = $("#category_name").val();    
});

answered Oct 17, 2011 at 21:56

Petah

46.2k30 gold badges161 silver badges216 bronze badges

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

Comments

ipr101 · Accepted Answer · 2011-10-17 22:09:34Z

2

Your code is working, the change event won't fire until the textbox has lost focus.

You could try the 'keyup' event instead.

edited Oct 17, 2011 at 22:09

answered Oct 17, 2011 at 21:56

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

Jay · Accepted Answer · 2011-10-17 21:59:11Z

1

How about this one?

$(function() {
    cat_name = document.getElementById('category_name');
    $(cat_name).bind({
        keyup : function() {
            alert('Handler for .change() called.');
            var category = $("#category_name").val();
        }
    });
});

answered Oct 17, 2011 at 21:59

Jay

1,4041 gold badge18 silver badges30 bronze badges

2 Comments

Petah Over a year ago

Why the document.getElementById

Jay Over a year ago

When you use ID instead of class its more safe to use document.getElementById. Specially if you write your script in head tag.

Collectives™ on Stack Overflow

jQuery onChange isn't triggering an event when text is entered into a form

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related