按名稱的JavaScript循環窗體的值，然後元素ID

Question

我有循環雖然表單值，它工作很好，拋出基於輸入名稱的值。但我也希望能夠通過特定元素ID進行定位。

這是一個例子形式：

_inputFields: function() { 
    var rows = []; 
    for(var i = 1; i <= 12; i++) { 
     var placeHolder = 'Intro text line ' + i; 
     var inputID = 'inputIntroText ' + i; 
     rows.push(<input type="text" className="form-control input-size-lg" name="formInput" id="inputText" placeholder={placeHolder}/>); 
     rows.push(<input type="text" className="form-control input-size-lg" name="formInput" id="inputTime" placeholder={placeHolder}/>); 
    } 

這樣我就可以循環並抓住按名稱即爲「的formInput」但一切怎麼能我然後抓住formInput[inputText]和formInput[inputTime]？

這是一個通過值我目前的循環：

// gather form input 
var elem = document.getElementsByName('formInput'); 
console.log(elem); 

// Build the object 
var obj = { 
    "DataObject": { 
     "user": { 
      "-name": "username" 
     }, 
     "contentFile": { 
      "-filename": "Breaking_News", 
      "lock": { 
       "-fileIsBeingEdited": "false" 
      }, 
      "content": { 
       "line": [] 
      } 
     } 
    } 
}; 

var line = obj.DataObject.contentFile.content.line; 
for (var i = 0; i < elem.length; i++) { 
    if (elem[i].value != '') { 
     line.push({ 
      "-index": i, 
      "-text": elem[i]['inputText'].value, 
      "-time": elem[i]['inputTime'].value 
     }); 
    } 
}; 

如果我嘗試：

"-text": elem[i]['inputText'].value, 
"-time": elem[i]['inputTime'].value 

我得到的錯誤：Cannot read property 'value' of undefined

Answer 1

您可以使用elem[i].id：

var line = obj.DataObject.contentFile.content.line; 
    for (var i = 0; i < elem.length; i++) { 
    if (elem[i].value != '') { 
     line.push({ 
     "-index": i, 
     "-text": elem[i].id 
     // Since you are looping through the inputs, you will get the `inputTime` in the 2nd iteration. 
    }); 
    } 
}; 

Answer 2

此錯誤是因爲elem[i]['inputText']爲undefined。這是因爲您正在嘗試查找元素的inputText屬性，該屬性不存在。

elem是一個數組，因此我建議使用類似filter的東西。

"-text": elem.filter(function(item) { 
    return item.id === 'inputText'; 
})[0].value; 

此外，你應該刪除for循環或你會得到一個重複的行。

function getElementById(elems, id){ 
    return elems.filter(function(item) { 
     return item.id === id; 
    })[0]; 
} 

var line = obj.DataObject.contentFile.content.line; 
line.push({ 
    "-text": getElementById(elem, 'inputText').value, 
    "-time": getElementById(elem, 'inputTime').value 
}); 

下面是一個例子jsfiddle。