从具有多个输入类型的表单更新每个字段的数据库

时间:2017-09-12 15:56:20

标签: javascript jquery ajax forms onchange

我有一个列出项目的动态表单 - 每行有多列。 到目前为止,当管理员点击提交按钮时,我在整个表单上添加了serialize()加上AJAX帖子,然后PHP查找了数据库和表单数据之间的差异。由于这似乎不是最先进的",我决定使用jQuery重新编码一个函数,只更新已更改的字段。表单中使用的输入类型大多是text类型,但也是select
但是,到目前为止,代码似乎有效。但我只希望显示已更改的对象,而不是整个表单及其所有字段。使用下面的代码就会发生什么。一旦我更改input text字段,整个表单及其所有列都会被POST。我还尝试在每个项目中添加onchange="test()",但这似乎也没有。任何人?

的jQuery

function test() {
    var y = $(this).serialize();

    console.log(y);

    $.post("change.php", y, function(data) {
        $("#demo").text(data);
    });
}

HTML

<table>
    <tr>
        <th>Category</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>
            <select multiple name="00001[category][]">
                <option value="1">Cat1</option>
                <option value="2" selected>Cat2</option>
                <option value="3">Cat3</option>
                <option value="4">Cat4</option>
            </select>
        </td>
        <td>
            <input type="text" name="00001[description]" value="Descr1">
        </td>
    </tr>
    <tr>
        <td>
            <select multiple name="00002[category][]">
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
                <option value="3">Cat3</option>
                <option value="4" selected>Cat4</option>
            </select>
        </td>
        <td>
            <input type="text" name="00002[description]" value="Descr2">
        </td>
    </tr>
</table>
</form>
<pre><p id="demo"></p></pre>

change.php

<?php print_r($_POST); ?>

2 个答案:

答案 0 :(得分:0)

如果你想摆脱提交按钮,你可以为每个输入添加事件监听器,然后当他们更改后输入名称和值而不是使用序列化。如果你想保留提交按钮,你可以让事件监听器在输入中添加一个类或属性(或选择,textarea等),然后在发布之前根据该选择进行选择。

答案 1 :(得分:0)

我工作了一点,根据评论和答案来解决这个问题。

function test(sel) {
    var x = {};
    var name = $(sel).attr("name");
    var value = $(sel).val();
    x[name] = value;

    console.log($.param(x));

    $.post("change.php", $.param(x), function(data) {
        $("#demo").text(data);
    });
}

它在PHP中提供了所需的关联POST数组输出。