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请求中不包含禁用的表单元素。感谢大家的建议。

Answer 2

如果您可以使用HTML5，则可以使用占位符属性example。请记住，这不适用于IE6-8等旧版浏览器。

<form>
<input type="text" placeholder="placeholder text" name="field1" value="" />
<input type="Submit" />
</form>

如果您不能使用它，则必须使用javascript对表单提交进行检测，并检查您提交的对象的值。另一个选项是拥有预览文本的标签，并在选择输入框时隐藏它或包含非空值。

Answer 3

waldol1的方法有效。在这里，我提出了一个建议，并提供了另一种方式。

<强>改进：

对于更干净的代码，只需为每个输入元素使用“add（this）”。

<input onchange="add(this)" />

然后，在add（）函数中，只需添加一行以获取被单击元素的名称

function add(e) {
    var name = e.name;
// do stuff
}

替代解决方案：

我不是以经典方式提交表格;我只是使用输入元素并使用Javascript进行操作。我不关心禁用表单元素，也不想依赖它作为标志。相反，我使用JS对象来存储我更改的变量，然后我在构建参数时运行该对象（在我的情况下，通过AJAX请求提交）。

定义一个全局“tosubmit”对象（如果需要，可以使用数组）。

var tosubmit = new Object();

对于我想要更新的任何输入元素，我在发生更改时调用add（this）：

<input onchange="add(this)" />

JS函数将更改的元素添加到我的临时存储对象。

function add(e) {

    // Store the element and it's value, ready for use later.
    tosubmit[e.name] = e.value;
}

当我准备好时，我为我的AJAX更新构建参数。在我的casI中运行带有ID的函数，在我的例子中。我运行了tosubmit对象，如果更新成功，我将其清除，准备再次使用。

function sendUpdate(id) {

    // Start building up my parameters to submit via AJAX to server.
    var params = "id="+encodeURIComponent(id);

    // Run through the tosubmit object, add any updated form elements.
    for (var i in tosubmit) {
        params = params + "&" + i + "=" + encodeURIComponent(tosubmit[i]);
    }

    // (Do other stuff, build my http request, etc)

    // Eventually submit params with the http request
    http.send(params);


}

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

3 个答案: