How do I iterate through text fields and push the value to an array

Question

I am trying to make a script that iterates through the form and stores the values into an array on keypress. The array is then displayed as concatenated text in another form called 'resultBox'. When i try to access using the document.GetElementById method it is giving uncaught TypeError: Cannot read property 'value' of null.

var values = [];

function getKeys(){
    for(var i = 0; i<myForm.length; i++){
        console.log(myForm[i].value);
        var txtValue = document.getElementById(myForm).value;
        values.push(txtValue);
        console.log(values);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excercise 2</title>
    <script src ="script.js"></script>
    <style>
        input[type=text] {
                width: 50%;
                padding: 12px 20px;
                margin: 8px 0;
                box-sizing: border-box;
                }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="txt1">Text Box 1</label>
        <input type = "text" onkeyup = 'getKeys()'id='txt1' name="txt1"> <br><br>
        <label for="txt2">Text Box 2</label>
        <input type = "text" id='txt2' name="txt2"><br><br>
        <label for="txt3">Text Box 3</label>
        <input type = "text" id='txt3' name="txt3"><br><br>
        <label for="txt4">Text Box 4</label>
        <input type = "text" id='txt4' name="txt4"><br><br>
        <label for="txt5">Text Box 5</label>
        <input type = "text" id='txt5' name="txt5"><br><br>
        <label for="txt6">Text Box 6</label>
        <input type = "text" id='txt6' name="txt6"><br><br>
    </form>
    <form id ="resultBox">
        <label for="txtResult">Result Box</label>
        <input type = "text" id ="txtResult" name="txtResult" readonly><br><br>
    </form>
</body>

</html>

Answer 1

You can try using some built-in methods like querySelectorAll() , map() , filter() and join() like the following way:

 var inputList = document.querySelectorAll('#myForm [type=text]:not(#txt6)'); inputList.forEach(function(input){ input.addEventListener('input', function(){ var values = Array.from(inputList).map(el => el.value.trim()).filter(v => v).join(', '); document.getElementById('txtResult').value = values; }); });

 input[type=text] { width: 50%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }

 <form id="myForm"> <label for="txt1">Text Box 1</label> <input type = "text" id='txt1' name="txt1"> <br><br> <label for="txt2">Text Box 2</label> <input type = "text" id='txt2' name="txt2"><br><br> <label for="txt3">Text Box 3</label> <input type = "text" id='txt3' name="txt3"><br><br> <label for="txt4">Text Box 4</label> <input type = "text" id='txt4' name="txt4"><br><br> <label for="txt5">Text Box 5</label> <input type = "text" id='txt5' name="txt5"><br><br> <label for="txt6">Text Box 6</label> <input type = "text" id='txt6' name="txt6"><br><br> </form> <form id ="resultBox"> <label for="txtResult">Result Box</label> <input type = "text" id ="txtResult" name="txtResult" readonly> <br><br> </form>

How do I iterate through text fields and push the value to an array

Question

1 answers

solution1
0 ACCPTED 2020-04-09 13:40:35

How do I iterate through text fields and push the value to an array

Question

1 answers

solution1 0 ACCPTED 2020-04-09 13:40:35

solution1
0 ACCPTED 2020-04-09 13:40:35