javascript - 一个字段改变后传递多个输入字段的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 '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() {}
    });
})