CODEWITHSUNDEEP
jquery
GeekedOut
GeekedOut

Reputation: 17185

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

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

Upvotes: 0

Views: 744

Answers (3)

ipr101
ipr101

Reputation: 24236

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

You could try the 'keyup' event instead.

Upvotes: 2

Jay
Jay

Reputation: 1404

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();
        }
    });
});

Upvotes: 1

Petah
Petah

Reputation: 46050

Use keyup instead:

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

Upvotes: 2

Related Questions