2

I need help in understanding how to transform this block into a simpler for loop:

var a,b,c;
a = parseInt(document.getElementById("a").value);
b = parseInt(document.getElementById("b").value);
c = parseInt(document.getElementById("c").value);

Is it possible to use a for loop to get all the values of from a form which can then be stored in an array? 

arr = [];
for (var i = 0; i < 3; i++) {
    var letter = parseInt(document.......value);
    arr.push(letter);
} // end for

The form:

<form name="yourform">
    <table>
        <tr>
            <td><label for="a">Enter first number:</label></td>
            <td><input type="text" id="a" size="6"></td>
        </tr>
        <tr>
            <td><label for="b">Enter second number:</label></td>
            <td><input type="text" id="b" size="6"></td>
        </tr>
        <tr>
            <td><label for="c">Enter third number:</label></td>
            <td><input type="text" id="c" size="6"></td>
        </tr>
        <tr>
            <td></td>
            <td><button here onclick("functionhere") /></td>
        </tr>
    </table>
Improve this question
2
  • What does the form look like? Can you post the HTML? (there's probably a nice way to do this without using IDs) Commented Jan 6, 2019 at 22:08
  • Please do not use table for layout purposes. It is meant to be used only for displaying tabular data. Commented Jan 6, 2019 at 22:22

4 Answers 4

Reset to default
1

You can construct an array of input values at once by selecting the inputs with a query string and using Array.from to map to each input's value:

const arr = Array.from(
  document.querySelectorAll('[name="yourform"] input'),
  input => input.value
);
console.log(arr);
<form name="yourform">
  <table>
    <tr>
      <td><label for="a">Enter first number:</label></td>
      <td><input type="text" id="a" size="6" value="a!"></td>
    </tr>
    <tr>
      <td><label for="b">Enter second number:</label></td>
      <td><input type="text" id="b" size="6" value="b!"></td>
    </tr>
    <tr>
      <td><label for="c">Enter third number:</label></td>
      <td><input type="text" id="c" size="6" value="c!"></td>
    </tr>
    <tr>
      <td></td>
      <td><button here onclick( "functionhere") /></td>
    </tr>
  </table>
</form>

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

Comments

1

Just select all input elements that have type=text in your form container and iterate over it using Array.prototype.map: 

let inputs = myFormTable.querySelectorAll('input[type=text]');

btn.addEventListener('click', () => {
  let numbersArr = [...inputs].map(e=>e.value);
  let [ x, y, z ] = numbersArr;
  console.log(numbersArr);
  console.log(x);
  console.log(y);
  console.log(z);
})
label { display: inline-block; width: 180px; }
<div id="myFormTable">
  <label for="a">Enter first number:</label>
  <input type="text" id="a">
  <br />
  <label for="b">Enter second number:</label>
  <input type="text" id="b">
  <br />
  <label for="c">Enter third number:</label>
  <input type="text" id="c">
  <br />
  <button id="btn" type="button">show numbers</button>
</div>

Improve this answer

Comments

0

Yes, you just need an array containing the thing that changes.

const results = [];
['a', 'b', 'c'].forEach(function (id) {
    const element = document.getElementById(id);
    const result = parseInt(element.value, 10); // Don't use parseInt without specifying the number base!
    results.push(result);
});
Improve this answer

Comments

0

Try to do like this!

function getElements() {
    var len = document.getElementById("frm").elements.length;
    for(var i = 0; i < len; i++) {
        console.log(document.getElementById("frm").elements[i].value);
    }
}

<form id="frm">
    <input type="text/html" name="name" id="name"/>
    <input type="text/html" name="email" id="email"/>
    <input type="text/html" name="phone" id="phone"/>
    <input type="button" value="send" onclick="getElements()"/>
</form>
Improve this answer

Comments