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

Answer 1

Use keyup instead:

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