一个字段改变后传递多个输入字段的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 函数的最优雅的方法，并将具有相同类的更改字段的 all 字段的值传递给它，以便我可以创建一个 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 'Change' 功能（无论哪种方式我都没有找到如何使用它们..）或任何其他方式:)

非常感谢！

Answer 1

首先，您必须为所有输入字段提供名称（以及表单 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() {}
    });
})

Answer 2

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

});