Getting input box values into an array in Javascript/HTML

Question

I'm learning Javascript for a project. I'm trying to try and get values from an dynamic number of text inputs into a multi-dimensional array. I have tried this with 1 text field and it correctly saves into the array for further manipulation later. However when i added an second text field and another dimension to the array, it broke. Eventually i will have a drop down list to give the number of inputs once i figure it out. Here's my current code, not very efficient really.

    <html>
<head>
    <title> JavaScript Array from Input</title>
    <script>

        var array = new Array();

        function insert(val){
            array[0][array.length]=val;
        }

         function insert2(val){
            array[array.length][0]=val;
        }

        function show() {
            var string="<b>All Element of the Array :</b><br>";
            for(i = 0; i < array.length; i++) {
                string =string+array[i][0]+"<br>";
                string =string+array[0][i]+"<br>";
            }
            if(array.length > 0)
                document.getElementById('myDiv').innerHTML = string;
        }
    </script>

</head>

<body>
    <h2>JavaScript Array from Input</h2>
    <form name="form1">
        <table width="407">
            <tr>
                <td width="154" align="right"><b>Name</b>
                <td width="9"><b>&nbsp;:</b>
                <td width="224">
                <input type="integer" name="name"/>
            </tr>
            <tr>
                <td width="154" align="right">
                <td width="9">
                <td width="224">
            </tr>
            <tr>
                <td width="154" align="right">
                <td width="9">
                <td width="224">


                <td width="154" align="right"><b>Name2</b>
                <td width="9"><b>&nbsp;:</b>
                <td width="224">
                <input type="integer" name="name2"/>
            </tr>
            <tr>
                <td width="154" align="right">
                <td width="9">
                <td width="224">
            </tr>
            <tr>
                <td width="154" align="right">
                <td width="9">
                <td width="224">
                <input type="button" Value="Add Into Array" 
                       onclick="insert(this.form.name.value), insert2(this.form.name2.value);"/>

                                        <input type="button" Value="alert" 
                       onclick="alert(array[0][0])"/>
            </tr>
        </table>

    </form>
    <div id="myDiv"></div>
</body>

Yeah sorry, i have closed it, it got missed out when copying the code. — kishan patel
– kishan patel, Commented Feb 24, 2012 at 13:01
I'm using a 2d array as each index, say [0][x], will map to a specific name and [1][x] will map to another and so on. — kishan patel
– kishan patel, Commented Feb 24, 2012 at 13:05
I've solved it, The way i was inputting into the arrays in the insert function was wrong. Now i need to figure out how to create a dynamic number of feilds and insert functions based on a drop down list value — kishan patel
– kishan patel, Commented Feb 24, 2012 at 13:48

Valentin D · Accepted Answer · 2012-02-24 13:55:41Z

In case you didn't figured it out yet here is the code:

<html>

<script>
    var arrayX =5;
    var arrayY =2;
    var array=new Array(arrayX);
    var arrayIndex=0;


    for (x=0; x<array.length; x++)
    {
        array [x] = new Array(arrayY);            
    }

    function insert(val1, val2){
    if (arrayIndex >= arrayX)
    {
    alert("End of array!");
    return false;
    }

        array[arrayIndex][0]=val1;
        array[arrayIndex][1]=val2;
        arrayIndex++;
        document.getElementById('name1').value = '';
        document.getElementById('name2').value = '';
    }

    function show() {
        var string='<b>All Element of the Array :</b><br>';
        for(i = 0; i < array.length; i++)
        {
        string+='array['+i+']:'+array[i][0]+'-'+array[i][1]+'<br>';
        }
        if(array.length > 0)
        document.getElementById('myDiv').innerHTML = string;
    }
</script>

</head>
<body>
    <h2>JavaScript Array from Input</h2>
    <form name="form1">
        <table width="407">
            <tr>
                <td width="154" align="right"><b>Name1</b></td>
                <td width="9"><b>&nbsp;:</b></td>
                <td width="224">
                <input type="integer" name="name" id="name1"/></td>
            </tr>
            <tr>
                <td width="154" align="right"><b>Name2</b></td>
                <td width="9"><b>&nbsp;:</b></td>
                <td width="224">
                <input type="integer" name="name2" id="name2"/></td>
            </tr>


        </table>
        <table width="407">
        <tr>
        <td><input type="button" value="Add Into Array"
                       onclick="insert(this.form.name.value,this.form.name2.value);"/>
</td>
<td>
                <input type="button" value="alert"
                       onclick="show();"/>
</td>
</table>
</form>
<div id="myDiv"></div>

</body>
</html>

arunes · Accepted Answer · 2012-02-24 12:52:00Z

0

Btw, you have to insert ";" between function calls, not ","

onclick="insert(this.form.name.value); insert2(this.form.name2.value);

answered Feb 24, 2012 at 12:52

arunes

3,5242 gold badges23 silver badges31 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:48:01Z

0

You need to close all the td elements.
As arunes mentioned, modify the onclick call with ';' seperator.
As mentioned in my comment, close html tag
Not sure why you are using 2-d array, what you want can be done with 1-d array.

Here's the modified code, just go through-

http://jsfiddle.net/h3r9j/

Its better to make a single function to insert into array rather than 2 seperate functions.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Feb 24, 2012 at 13:14

sgowd

2,26222 silver badges30 bronze badges

1 Comment

kishan patel Over a year ago

I need a 2D array because i will have for example 3 names, john, jack, and james, Each array index will represent a name so [0][i] will be john and [1][i] will be jack. there will be a n number of values for each name.

Collectives™ on Stack Overflow

Getting input box values into an array in Javascript/HTML

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related