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，並點擊提交按鈕，循環檢查每個輸入值，如果value!=0，腳本收集新的價值和它的輸入名稱，然後將其發佈到數據庫中。

例如，如果輸入字段命名爲「一號」獲取新的值命名爲「五」，「2」，並輸入域獲得新的值「1」，在數據庫One 2; Five 1;腳本的帖子，並跳過與值的所有其他字段0

或者它可能更容易創建表格而不是輸入字段來做到這一點？

對不起，我的英語不好，並提前謝謝。

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

Answer 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