Foreach if 语句循环通过表单 javascript答案

【问题标题】：Foreach if statement loop through form javascriptForeach if 语句循环通过表单 javascript
【发布时间】：2014-04-13 23:19:17
【问题描述】：

是否可以循环检查html表单中的每个输入文本字段？例如，表单有 8 个输入字段，预定义的值为 0。

表格代码：

<form method="post" action="" id="form"> 

<input type='text' name="One"  id="one" value='0'>
<input type='text' name="Two"  id="two" value='0'>
<input type='text' name="Three"  id="three" value='0'>
<input type='text' name="Four"  id="four" value='0'>
<input type='text' name="Five"  id="five" value='0'>
<input type='text' name="Six"  id="six" value='0'>
<input type='text' name="Seven"  id="seven" value='0'>
<input type='text' name="Eight"  id="eight" value='0'>

</form>

当用户将其中一些更改为大于 0 的任何其他数值并单击提交按钮时，循环检查每个输入值，如果 value!=0，脚本会收集新值及其输入名称，然后将其发布到数据库中。

例如，如果名为“One”的输入字段获得新值“2”，而名为“Five”的输入字段获得新值“1”，则脚本在数据库One 2; Five 1; 中发布并跳过所有其他值为0 的字段。

或者使用表格而不是输入字段来创建表单是否更容易？

对不起，我的英语不好，提前谢谢你。

【问题讨论】：

在表单提交时，循环遍历每个输入，如果value=0 设置disabled=true。这样元素就不会被提交。

标签： javascript php jquery html forms

【解决方案1】：

由于你的标签有 jquery，这里有一个 jquery 方法来拦截提交并只发布更改的值。您将替换输出要发布的文本的部分。请参阅此updated fiddle。

HTML：

<form method="post" action="" id="form"> 
    <input type='text' class='textInput' name="One"  id="one" value='0'>
    <input type='text' class='textInput' name="Two"  id="two" value='0'>
    <input type='text' class='textInput' name="Three"  id="three" value='0'>
    <input type='text' class='textInput' name="Four"  id="four" value='0'>
    <input type='text' class='textInput' name="Five"  id="five" value='0'>
    <input type='text' class='textInput' name="Six"  id="six" value='0'>
    <input type='text' class='textInput' name="Seven"  id="seven" value='0'>
    <input type='text' class='textInput' name="Eight"  id="eight" value='0'>
    <input type="submit" id='submit' value="Submit">
</form>
<p id='output'></p>

Javascript：

$('form').submit(function(){    
    $('.textInput').each(function(){ 
        if($(this).val() != '0')
        {
            $('#output').text($('#output').text()+ ' ' + $(this).attr('name') + ':' + $(this).attr('value') );
        }
    });
    return false;
});

【讨论】：

【解决方案2】：

var inputs = document.getElementById('form').children;
var data = {};
for(var i in inputs ){
    if(inputs[i].value != 0)data[inputs[i].name] = inputs[i].value;
}

// do Post-Request with XHR here using data which holds all values

【讨论】：