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]['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的示例。

Answer 2

您可以使用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.
    });
   }
};

javascript循环表单的名称，然后是元素id

2 个答案: