Question

我正在使这个项目需要一个更新产品信息的功能。有一个HTML表单，其中包含许多输入，例如文本框等，并且此表单是对“ Update”功能的响应，因此，当单击update按钮时，所有输入内容将被写入数据库。因为表单中包含大量的“信息”，所以我想找出是否有可能我仅跟踪已编辑的html输入。

例如，当我单击“提交”按钮时，只有一个文本框内容发生了更改，那么我只需要处理该特定文本框中的文本，而忽略其余的表单（因为没有编辑）。

有什么建议吗？解决这种情况？谢谢！

Answer 1

我们需要知道您的api期望什么样的请求。

由于您说过要减少要更新的信息量，因此我假设您的api允许进行此类更新。

可以说您的api接受如下请求（其中每个属性都可以省略）：

[PUT] /人/身份证

{
   name: "e.g. some name",
   age: "e.g. some age"
}

然后，您可以通过在每个onchange事件中添加相应的属性来优雅地构建请求对象。

它看起来像这样：

1。声明一个全局请求对象。

var request = {}

2。编写一个通过key：value更新请求对象的函数

function AppendToRequest(key, value){ 
    request[key] = value
}

3。使用api期望的键将此功能附加到每个输入表单：

<input id="name" ... onchange="(event) => AppendToRequest('name', event.target.value)" />
<input id="age" ... onchange="(event) => AppendToRequest('age', event.target.value)" />

4。启动api后，请确保重置请求对象以供以后更新。

request = {}

Answer 2

解决方案可以基于：

在dom准备就绪时，将每个输入值另存为数据属性
在提交检查哪些输入已更改之前

function saveOrigValues() {
    document.querySelectorAll('form input:not([type="submit"])').forEach(function(ele) {
        switch (ele.type.toLowerCase()) {
            case 'text':
                ele.dataset.origValue = ele.value;
                break;
            case 'checkbox':
                ele.dataset.origValue = ele.checked;
                break;
        }
    });
}
function getChangedValues() {
    return Array.from(document.querySelectorAll('form input:not([type="submit"])')).reduce(function(a, ele) {
        var currValue = '';
        switch (ele.type.toLowerCase()) {
            case 'text':
                currValue = ele.value;
                break;
            case 'checkbox':
                currValue = ele.checked.toString();
                break;
        }
        if (ele.dataset.origValue != undefined && ele.dataset.origValue != currValue) {
            a.push({name: ele.name, value: currValue});
        }
        return a;
    }, []);
}

// save original values at dom ready....
saveOrigValues();

document.querySelector('[type="submit"]').addEventListener('click', function(e) {
    // on submit find changed values....
    e.preventDefault();
    var changedValues = getChangedValues();
    
    console.log('Changed values are (name / value): ' + JSON.stringify(changedValues));
})

<form>
    <input name="ele1" type="text" value="1">
    <input name="ele2" type="checkbox">c1
    <input name="ele3" type="checkbox">c2
    <input type="submit" value="Submit">
</form>

如何检测HTML输入内容是否已更新

2 个答案: