按名称的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。