使用预先填充的表单，仅提交更改的字段 [英] Using prepopulated form, submit only changed fields
问题描述
我有一个使用select和text输入的html表单。表单预先填入默认值。我如何仅提交用户从其默认值更改的输入？请注意，这个页面将被存储在一个空间有限的嵌入式系统中，所以使用javascript库是不可能的。
示例html：
< form>
< input type =textname =field1value =value1/>
< input type =textname =field2value =value2/>
< select name =field3>
< option value =option1select> Option 1< / option>
< option value =option2select> Option 2< / option>
< / select>
< input type =Submit/>
< / form>
要清楚，用户不会更改的输入不应显示在POST请求中表单已提交。
根据Barmar建议使用数组来追踪哪些值已更改，这是我的解决方案
以下是js：
var tosubmit = []
function add（name）{
if（tosubmit.indexOf（name）== -1）
tosubmit.push（name）;
$ b $函数is_changed（name）{
for（var k = 0; k< tosubmit.length; k ++）
if（name == tosubmit [ k]）
返回名称&&真正;
返回false;
函数before_submit（）{
var allInputs = document.getElementsByTagName（input）;
var allSelects = document.getElementsByTagName（select）; （var k = 0; k< allInputs.length; k ++）{
var name = allInputs [k] .name;
if（！is_changed（name））
allInputs [k] .disabled = true; （var k = 0; k
}
;
if（！is_changed（name））
allSelects [k] .disabled = true;
$ / code $ / pre
$ b $ html $：
< form onSubmit =beforeSubmit（）>
< input type =textname =field1value =value1onchange =add（'field1'）/>
< input type =textname =field2value =value2onchange =add（'field2'）/>
< option value =option1select> Option 1< / option>
< option value =option2select> Option 2< / option>
< / select>
< input type =Submit/>
< / form>
这是可行的，因为被禁用的表单元素不包含在POST请求中。感谢大家的建议。
I have an html form that uses select and text inputs. The form comes pre-populated with default values. How can I submit only the inputs that were changed by the user from their default values? Note that this page is to be stored in an embedded system with limited space, so using a javascript library is out of the question.
Example 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>
To be clear, inputs that the user does not change should not show up in the POST request when the form is submitted.
解决方案 As per Barmar's suggestion to use an array to track which values have changed, this is the solution I have come up with and it works.
Here is the 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>
This works because form elements that are disabled are not included in the POST Request. Thanks everyone for their suggestions.
这篇关于使用预先填充的表单，仅提交更改的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
