2

我有一个使用选择和文本输入的 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 请求中。

4

3 回答 3

8

根据 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 请求中。感谢大家的建议。

于 2013-05-21T19:55:14.487 回答
1

如果您可以使用 HTML5，则可以使用 placeholder 属性，例如。请记住，这不适用于 IE6-8 等较旧的浏览器。

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

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

于 2013-05-20T23:10:58.020 回答
0

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 更新构建参数。在我的案例中，我使用 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);


}
于 2018-02-07T18:20:49.937 回答