使用预先填充的表单,仅提交更改的字段

Question

我有一个使用选择和文本输入的HTML表单.表单预先填充了默认值.如何仅提交用户从其默认值更改的输入？请注意,此页面将存储在空间有限的嵌入式系统中,因此使用javascript库是不可能的.

示例html:

<form>
    <input type="text" name="field1" value="value1" />
    <input type="text" name="field2" value="value2" />
    <select name="field3">
        <option value="option1" select>Option 1</option>
        <option value="option2" select>Option 2</option>
    </select>
    <input type="Submit" />
</form>

为了清楚起见,提交表单时,用户不会更改的输入不应显示在POST请求中.

Answer 1

根据Barmar的建议,使用数组来跟踪哪些值已经改变,这是我提出的解决方案,它的工作原理.

这是js:

var tosubmit = []
function add(name) {
    if(tosubmit.indexOf(name) == -1)
        tosubmit.push(name);
}

function is_changed(name) {
    for(var k = 0; k < tosubmit.length; k++)
        if(name == tosubmit[k])
            return name && true;
    return false;
}

function before_submit() {
    var allInputs = document.getElementsByTagName("input");
    var allSelects = document.getElementsByTagName("select");
    for(var k = 0; k < allInputs.length; k++) {
        var name = allInputs[k].name;
        if(!is_changed(name))
            allInputs[k].disabled = true;
    }
    for(var k = 0; k < allSelects.length; k++) {
        var name = allSelects[k].name;
        if(!is_changed(name))
            allSelects[k].disabled = true;
    }
}

HTML:

<form onSubmit="beforeSubmit()">
    <input type="text" name="field1" value="value1" onchange="add('field1')" />
    <input type="text" name="field2" value="value2" onchange="add('field2')" />
    <select name="field3" onchange="add('field3')">
        <option value="option1" select>Option 1</option>
        <option value="option2" select>Option 2</option>
    </select>
    <input type="Submit" />
</form>

这是有效的,因为POST请求中不包含禁用的表单元素.谢谢大家的建议.