Foreach if語句遍歷表單javascript

Question

是否有可能並使循環檢查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的任何其他數字值並單擊Submit按鈕時，循環檢查每個輸入值，如果value!=0 ，腳本將收集新值及其輸入名稱，然后將其發布到數據庫中。

例如，如果名為“ One”的輸入字段獲得新值“ 2”，而名為“五”的輸入字段獲得新值“ 1”，則腳本將張貼在數據庫“ One 2; Five 1; One 2; Five 1; 並跳過所有其他值為0的字段。

還是用表格而不是輸入字段來創建表單更容易做到這一點？

對不起，我的英語不好，謝謝你。

Answer 1

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

Answer 2

由於您的標記具有jquery，因此這是一種jquery方式，用於攔截提交和僅發布更改后的值。 您將替換輸出文本以發布的部分。 請參閱此更新的小提琴 。

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