javascript loop form values by name then element id

Question

I have loop going though form values, it is working fine throwing out the values based on the input name. But I would also like to be able to target by specific element id.

This is an example form:

_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}/>);
    }

So I can loop through and grab everything by name i.e. 'formInput' but how can I then grab formInput[inputText] and formInput[inputTime]?

This is my current loop through the values :

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

If I try:

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

I get the error: Cannot read property 'value' of undefined

Your logic is wrong. when you do document.getElementsByName('formInput');, you get two input elements with same name and different ids. Why do you later want to access the two in one iteration? The interpreter is correct to tell you Cannot read property 'value' of undefined, since the indices you are trying to access, don't exist in you elems array — kennasoft
– kennasoft, Commented Oct 19, 2015 at 9:40

James Brierley · Accepted Answer · 2015-10-19 10:57:58Z

1

This errors because elem[i]['inputText'] is undefined. This is because you are trying to lookup the inputText property of the element, which doesn't exist.

elem is an array, so I'd recommend using something like filter.

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

Also, you should remove the for loop or you will get a duplicate line.

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

Here's an example jsfiddle.

edited Oct 19, 2015 at 10:57

answered Oct 19, 2015 at 9:38

James Brierley

4,6801 gold badge22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

chinds Over a year ago

Hi thanks for the help, when trying to run your code (without the for loop) I get the error 'elem' is not defined on this line: "-text": getElementById(elem, 'inputText').value,

James Brierley Over a year ago

@chinds I've added an example jsfiddle to my answer. The values are empty because it's running before the inputs can be set, but it doesn't error.

chinds Over a year ago

tahnks and I have just seen my error :/ I accidentally deleted the first line that was declaring elem. Thanks again.

chinds Over a year ago

ok so I have this working, but obviously it is not looping over the entire form, I have tried putting in a loop to go over each input field but i can't get it to work, there are 10 text input fields and 10 time input fields to the form.

James Brierley Over a year ago

@chinds I've updated the jsfiddle with an example that loops through three sets of inputs.

Sandeep Nayak · Accepted Answer · 2015-10-19 09:37:47Z

0

You can use 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.
    });
   }
};

answered Oct 19, 2015 at 9:37

Sandeep Nayak

4,7571 gold badge25 silver badges34 bronze badges

Collectives™ on Stack Overflow

javascript loop form values by name then element id

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related