JavaScript的foreach輸入形式的名稱和值

我只是練習一些JavaScript，我曾經使用JQuery很多！我沒有與原始JavaScript的主要經驗，我想學習它，就像我沒有JQuery。我有一個簡單的表單和一個JavaScript函數去與它onsubmit和我想獲得名稱和每個輸入的值與我的函數的形式，但它似乎並沒有工作有人可以幫我嗎？JavaScript的foreach輸入形式的名稱和值

<!DOCTYPE html> 
<html> 
<head> 
    <title>Foreach Practice</title> 
    <script type="text/javascript"> 
     function Get() { 
      var Form = document.getElementById('Form'); 
      for(I = 0; I < Form.length; I++) { 
       var Value = this.attribute('name').value; 
       alert(Value); 
      } 
     } 
    </script> 
</head> 
<body> 
<form id="Form" onsubmit="return false;"> 
    <input type="text" name="User" placeholder="Username" /> 
    <input type="password" name="User" placeholder="Password" /> 
    <input type="submit" name="Submit" onclick="javascript:Get();" /> 
</form> 
</body> 
</html>

來源

2013-04-08 Moussa Harajli

這個問題可能更適合代碼審查，但無論如何。

> function Get() {

按照慣例，以大寫字母開頭的變量名是爲構造函數保留的。而且，名稱應該表明函數的功能，通用的「get」函數不會提供太多提示。更好的名字可能是getFormValues。

>  var Form = document.getElementById('Form');

有一個document.forms收集可用的，可作爲替代調用方法：

var form = document.forms('Form'); 

>  for(I = 0; I < Form.length; I++) {

你應該總是在適當的範圍內聲明的變量（注意只的ECMAScript具有全局性，功能性和eval範圍，沒有區間範圍），尤其是計數器。此外，窗體的長度屬性是窗體中控件的數量。因爲它是一個活的集合，每次得到的長度時，你不需要是一個潛在的性能損失，因此緩存值：

for (var i = 0, iLen = form.length; i < iLen; i++) { 

>   var Value = this.attribute('name').value;

的這個值由你如何調用一個函數設置。如果函數被處理程序調用，則根據瀏覽器和方法附件，這個將引用其偵聽器稱爲函數的元素。在這種情況下，因爲函數被內聯監聽器調用，所以這個尚未設置，所以默認爲全局對象。

您可以輕鬆地從聽者傳遞到元素的引用，如果你這樣做：

<input ... onclick="getFormValues(this);" ... >

現在你的函數將接收到的元素的引用，可以方便地獲取到窗體的引用，並遍歷控制。最後，很少需要訪問表單控件的屬性值，你幾乎總是想訪問屬性。因此，這裏的重新編寫的函數：

function getFormValues(element) { 
    var form = element.form; 
    var controls = form.controls; 

    for (var i=0, iLen=controls.length; i<iLen; i++) { 
     alert(controls[i].name + ': ' + controls[i].value); 
    } 
    // Prevent form submission 
    return false; 
}

最後，你最好從形式呼籲聽衆，而不是提交按鈕，因爲形式可以通過非點擊提交按鈕等方式提交。哦，並且不要調用任何表單控件「提交」或使用與表單方法相同的任何名稱，因爲它會覆蓋相同名稱的方法。由於大寫，你可以在這裏避開它，但那不是很多的防守。

的相關HTML即可（注意，窗體現在並不需要是一個名稱或ID）：

<form onsubmit="return getFormValues();"> 
    <input type="text" name="userName" placeholder="Username"> 
    <input type="password" name="userPassword" placeholder="Password"> 
    <input type="submit" name="submitButton"> 
</form>

來源

2013-04-08 01:50:48 RobG

你應該重複來形成的children和使用getAttribute功能來獲得屬性值。

試試這個：

function Get() { 
    var Form = document.getElementById('Form');   
    var childs = Form.children;   
    for(I = 0; I < childs.length; I++) {      
     var Value = childs[I].getAttribute('name');        
     alert(Value); 
    } 
}

來源

2013-04-08 01:37:05

這也是工作！ – 2013-04-08 01:40:37

OP需要表單控件，* children *集合將獲得所有元素子元素，並且不會在所有使用的瀏覽器中實現。應該解決的代碼還有很多其他問題。 – RobG 2013-04-08 01:53:42

任何尋找這個問題的答案我想它甌只是通過重新安排我的代碼的隨機嘗試，但在這裏。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Foreach Tutorial</title> 
    <script type="text/javascript"> 
     function Get() { 
      var Form = document.getElementById('Form'); 
      for(I = 0; I < Form.length; I++) { 
       var Name = Form[I].getAttribute('name'); 
       var Value = Form[I].value; 
       alert(Name + ' : ' + Value); 
      } 
     } 
    </script> 
</head> 
<body> 
<form id="Form" onsubmit="return false;"> 
    <input type="text" name="User" placeholder="Username" /> 
    <input type="password" name="Pass" placeholder="Password" /> 
    <input type="submit" name="Submit" onclick="Get();" /> 
</form> 
</body> 
</html>

來源

2013-04-08 01:39:40

如果您要利用所提供的幫助並相應地編輯您的答案，那將會更有用。 – RobG 2013-04-08 02:54:33

JavaScript的foreach輸入形式的名稱和值

回答

相關問題