How to get Values from HTML Input Array using JavaScript?

Last Updated : 09 Jan, 2025

This problem can be solved by using input tags having the same "name" attribute value that can group multiple values stored under one name which could later be accessed by using that name.

Syntax

let input = document.getElementsByName('array[]');

What is an Input Array in HTML?

An "input array" in HTML typically refers to form elements that share the same name attribute. These could be:

Checkboxes: Allow users to select multiple options.
Radio Buttons: Allow users to select only one option from a group.
Select Dropdowns: Though they don't have the same name, they can return multiple selected options.

Using Document.getElementsByName() Method

It returns all the values stored under a particular name thus making the input variable an array indexed from 0 to the number of inputs. The method document.getElementById().innerHTML is used to change the inner HTML of the selected Id. So in this way, we can access the input values and convert them into the array and access it as you like.

html

<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3 id="po">Input Array Elements</h3>
  
    <form class="" action="index.html" method="post">
        <input type="text" name="array[]" value="" /><br>
        <input type="text" name="array[]" value="" /><br>
        <input type="text" name="array[]" value="" /><br>
        <input type="text" name="array[]" value="" /><br>
        <input type="text" name="array[]" value="" /><br>
        <button type="button" name="button" onclick="Geeks()">
            Submit
        </button>
    </form>
    <br>

    <p id="par"></p>

    <script type="text/javascript">
        let k = "The respective values are :";
        function Geeks() {
            let input = document.getElementsByName('array[]');

            for (let i = 0; i < input.length; i++) {
                let a = input[i];
                k = k + "array[" + i + "].value= "
                    + a.value + " ";
            }

            document.getElementById("par").innerHTML = k;
            document.getElementById("po").innerHTML = "Output";
        }
    </script>
</body>

Output

newwwwwwwwwwwwww

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.