Передать значения функции JS нескольких полей ввода после изменения в одном поле

Question

У меня есть HTML-форма с множеством полей выбора и ввода, с помощью которых пользователь выбирает элементы своего заказа для каждой категории (элементы одной и той же категории имеют один и тот же класс). каждый элемент также имеет поля для других свойств, например, количество, цвет и т. д.
Вот пример формы:

<form>
    <!--Category: Cats-->
    <label>Cat:</label>
    <select id="cat" class="cats">
        <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>

Реальная форма имеет много много других категорий. Кроме того, из-за необходимости представления, есть поля, принадлежащие к одной категории, которые я не могу сгруппировать вместе в одном родительском теге, что означает, что они находятся в совершенно разных местах на странице HTML.

Давайте представим, что пользователь только что изменил одно поле в форме. Я ищу самый элегантный способ вызывать функцию JS каждый раз, когда происходит изменение, и передавать ей значения всех полей, которые имеют один и тот же класс измененного поля, чтобы я мог создать строка JSON, которую я отправлю, используя вызов Jquery .AJAX, чтобы обновить запись в моей БД.

Например, если пользователь выберет в 'cat' - 'ugly', будет вызвана функция JS, которая может создать переменную:

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

, а затем

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

Можете ли вы предложить элегантный способ? Я не уверен, использовать ли вызовы OnChange, функцию «Изменить» Jquery (в любом случае я не нашел, как это сделать, используя их ..) ИЛИ ЛЮБОЙ ДРУГОЙ СПОСОБ :))

Большое спасибо!

Answer 1

Изменение jQuery: http://api.jquery.com/change/

Вот как это можно использовать:

$('#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

});

Answer 2

ну, во-первых, вы должны дать имена всем вашим полям ввода (и форме 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>

и затем js для сериализации выбора:

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