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

我有一个使用select和text输入的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请求中不应该显示的输入。

来源

2013-05-20 waldol1

你到目前为止试过了什么？基本上，您应该为每个输入元素添加'onchange'处理程序，并将其添加到已更改元素的数组中。然后编写一个'onsubmit'处理程序，收集该数组中所有元素的值，序列化这些值并将它们提交给服务器。 – Barmar

我认为这应该足以让你尝试自己写。如果你不能工作，回来并显示你的代码。 – Barmar

我会试一试。 – waldol1

根据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-21 19:55:14 waldol1

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

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

如果你不能使用它，你必须检测表单提交javascript并检查你提交的对象的值。另一种选择是在预览文本上贴上标签，并在选择输入框或包含非空值时将其隐藏。

来源

2013-05-20 23:10:58 AJak

不是一个很好的解决方案;输入仍然会通过POST发送，只是“（空白值），这不是提问者想要的。 –

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

改进：

对于清洁器的代码，只要使用 “添加（本）” 用于每个输入元素。

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

然后，在add（）函数，只需增加一个一线得到被点击

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

元素的名称替代的解决方案：

我不是以经典的方式提交表格;我只是使用输入元素和Javascript的东西。我不在乎禁用表单元素，也不希望将其作为标志。相反，我使用JS对象来存储我更改的变量，然后当我构建参数时（我的情况下，通过AJAX请求提交），我只是运行该对象。

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

var tosubmit = new Object();

对于我想更新任何输入要素，我呼吁增加（这一点）时，有一个变化：

<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); 


}

来源

2018-02-07 18:20:49 MarsAndBack

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

回答

相关问题