Pass JS function values of multiple input fields after change in one field

I have HTML form with lots of select and input fields, using it a user selects his order items per each category (items of the same category have the same class). each item also has fields for other properties e.g. quantity, color etc.

here is an example form:

<form>
    <!--Category: Cats-->
    <label>Cat:</label>
    <select id="cat" class="cats">
 开发者_如何学C       <option>nice</option>
        <option>ugly</option></select>
    <label>Quantity:</label>
    <input type="text" id="cat_qty" class="cats" />
    <br />
    <!--Category: Dogs-->
    <label>Dog:</label>
    <select id="dog" class="dogs">
        <option>nice</option>
        <option>ugly</option></select>
    <label>Quantity:</label>
    <input type="text" id="dog_qty" class="dogs" />
    <br />
</form>

The real form has many many more categories. also, because of presentation necessities, there are fields that belong to the same category that i can't group together inside the same parent tag, meaning that they reside in totally different places in the HTML page.

Let us imagine that the user just made a change to one field in the form. I'm searching for the most elegant way to trigger a JS function each time a change happens, and to pass it the values of all fields that have the same class of the changed field, so that i can create a JSON string which i'll send using Jquery's .AJAX call in order to update a record in my DB.

For example, if the user choose in 'cat' - 'ugly', a JS function will be called that can create the variable:

fields = {  "cat":"ugly",
            "cat_qty" : "6"}

and then

$.ajax({type: "POST",
    url: "ajax/update.php",
    data: { Myfields: fields },
    dataType: "json",
    success: function() {}
       });

Can you suggest an elegant way? I'm not sure whether to use OnChange calls, the Jquery 'Change' function (either way i didn't find how to do it using them..) OR ANY OTHER WAY :)

Thank you very much!

well 1st you have to give all your input fields names (and the form an ID):

<form id='pickAnimal'>
    <!--Category: Cats-->
    <label>Cat:</label>
    <select id="cat" class="cats" name='cat'>
        <option>nice</option>
        <option>ugly</option></select>
    <label>Quantity:</label>
    <input type="text" id="cat_qty" class="cats" name='cat_qty' />
    <br />
    <!--Category: Dogs-->
    <label>Dog:</label>
    <select id="dog" class="dogs" name='dog'>
        <option>nice</option>
        <option>ugly</option></select>
    <label>Quantity:</label>
    <input type="text" id="dog_qty" class="dogs" name='dog_qty'/>
    <br />
</form>

and then the js to serialize the choice:

$('input, select', $('#pickAnimal')).change(function(){

    var theClass = $(this).attr('class');
    var theForm = $('#pickAnimal');

    var dataFields = $('.'+theClass, theForm).serialize();
    //gets all data from fields in the form that have the same class

    $.ajax({
       type: "POST",
       url: "ajax/update.php",
       data: dataFields,
       dataType: "json",
       success: function() {}
    });
})

jQuery change: http://api.jquery.com/change/

Here's how it could be used:

$('#cat, #dog').change(function(e) {

    var _this = $(this);
    var value = _this.val();
    var id = _this.attr('id');
    var input = _this.siblings(':input');
    var quantity = input.val();

    var data = {};
    data[id] = value;
    data[input.attr('id')] = quantity;

    // do ajax stuff

});