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

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

});

在一个字段中更改后传递多个输入字段的JS函数值

2 个答案: