confused with multidimensional array

[fredykates]

here it goes..

hi guys, i am extremely new to javascript so have patient with me.

it's hard to explain but, can you guys give me examples of a multidimensional array. where you can input as many times as you want and will be submitted if you press something like (numpad asterisk).

something like this..

for ($x=1; $x<=$untilkeypressed; $x++) {
print "<input type="text" name="name[$x]">
print "<input type="text" name="sex[$x]">
print "<input type="text" name="age[$x]">
}

if you complete inputting data with name,sex and age. then next textbox will be visible for inputting another data or you may press the numpad asterisk to submit.

hope you could help me with this guys,
any comments or suggestions is appreciated.

thanks in advance

[Baez]

What you're using there isn't javascript. That's mostly PHP with a few syntax errors.

A multidimensional array looks like this:

ar[0][0]
ar[0][1]
ar[0][2]
ar[1][0]
ar[1][1]
ar[1][2]

And so on. In other words, it's an array inside an array. Think of them as pages inside books.

[paul_wilkins]

What you're using there isn't javascript. That's mostly PHP with a few syntax errors.

If the OP is looking for a way to submit form data so that PHP can retrieve it as an array, then that's the way to do.

Commonly emoty square brackets are added on to the end of the form name, for example:

<input name="data[]">
<input name="data[]">
<input name="data[]">

[fredykates]

thanks baez,

yes that's simple php program.

and i know what the multidimensional array looks like.
but the problem is, i don't know how to implement it.

i have no idea how to use input statement in html and store it in a multidimensional array in javascript.

[fredykates]

thanks paul_wilkins,

yes that's what i wanted to know.
the other question is in javascript.

how to do this in javascript?

- the user will input name,sex and age in their corresponding textboxes.
- after that another textbox will appear and ask for name,sex and age again
- and loop until the user presses a special key (numpad asterisk) to submit.

in other words, i will have multiple inputs and store it in an array.

sorry guys, but i'm just a beginner with javascript

[paul_wilkins]

how to do this in javascript?

- the user will input name,sex and age in their corresponding textboxes.
- after that another textbox will appear and ask for name,sex and age again
- and loop until the user presses a special key (numpad asterisk) to submit.

in other words, i will have multiple inputs and store it in an array.

Keep it simple. Add the three new elements in a div, and append that div (with it's attached form elements) to the form. When you want to hide it, apply a class name to the div.

That will retain the info in those fields which will be submitted when you submit the form.

[fredykates]

Keep it simple. Add the three new elements in a div, and append that div (with it's attached form elements) to the form. When you want to hide it, apply a class name to the div.

That will retain the info in those fields which will be submitted when you submit the form.

a bunch of thanks paul_wilkins,

if it's ok with you, can you give me some sample program on how to do this?
i've been pulling out my hair for a week and i'm very frustrated..

if not well that's fine,

i still wanna thank you for sharing your knowledge to others.
more power to you guys.

[paul_wilkins]

if it's ok with you, can you give me some sample program on how to do this?

There are a lot of pieces to what you are wanting, so keeping things simple helps to ensure that success is not hard to achieve.

I will create a generic example here where a field of data is entered. That should be relatively easy for you or anyone else to expand to meet your own individual needs.

Start with a form, with a button to add data, and to submit the form data. You do not want to leave the user confused about what to do, or how to do it.

When the line of data has been entered, the user can either click the add button, or they can type "tab + space" to trigger it with the keyboard.

Right now, an empty form.

<form id="data" submit="processData.php">
    <p>Please enter some data</p>
    <fieldset>
        <legend>Data</legend>
    </fieldset>
    <p><input type="button" name="add" value="Add more data">
    <p><input type="submit" value="Submit all data"></p>
</form>

The purpose of the fieldset is just to provide a useful location to contain the data. It could just be another div, but we want a relatively easy way to find all data sections and hide them, so containing them in a fieldet is a useful technique because we can easily search for that.

Why is there no data field there yet? Because we can have the script trigger the "add more data" button when the page loads, which will add one to the form for us. That's the last line of this script which is placed at the end of the body, just before the </body> tag.

var form = document.getElementById('data');
form.elements.add.onclick = addNewData;
form.elements.add.click();

The addNewData function is going to hide any divs that are already there, before adding a new data set to the end of the fieldset. When it adds the new data set, it can even set the focus to the first input field of that data set.

function addNewData() {
    var form = this.form,
        fieldset = form.getElementsByTagName('fieldset')[0],
        divs = fieldset.getElementsByTagName('div'),
        data = newData(divs.length + 1);
 
    hideAll(divs);
    fieldset.appendChild(data);
    data.getElementsByTagName('input')[0].focus();
}

The newData function just returns a div element that contains the other form fields we want to see.

function newData(index) {
    var div = document.createElement('div'),
        span = document.createElement('span'),
        text = document.createTextNode('Item ' + index + ' '),
        data = document.createElement('input');
    data.name = 'data[]';
 
    span.appendChild(text);
    div.appendChild(span);
    div.appendChild(data);
    return div;
}

The hideAll function loops through all divs in the fieldset, checking if they have been hidden of not, so that it can hide ones that have not yet been hidden.

function hideAll(elements) {
    var len = elements.length,
        i;
    for (i = 0; i < len; i += 1) {
        if (elements[i].style.display !== 'none') {
            hide(elements[i]);
        }
    }   
}

Finally we hide the div row, using a style declaration.

.hidden {
    display: none;
}

function hide(element) {
    element.className = 'hidden';
}

Here's the fully working test demo of the auto-adding data form.

<html>
<head>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>
<body>
<form id="data" submit="processData.php">
    <p>Please enter some data</p>
    <fieldset>
        <legend>Data</legend>
    </fieldset>
    <p><input type="button" name="add" value="Add more data">
    <p><input type="submit" value="Submit all data"></p>
</form>
<script>
function hide(element) {
    element.className = 'hidden';
}
function hideAll(elements) {
    var len = elements.length,
        i;
    for (i = 0; i < len; i += 1) {
        if (elements[i].style.display !== 'none') {
            hide(elements[i]);
        }
    }   
}
function newData(index) {
    var div = document.createElement('div'),
        span = document.createElement('span'),
        text = document.createTextNode('Item ' + index + ' '),
        data = document.createElement('input');
    data.name = 'data[]';
 
    span.appendChild(text);
    div.appendChild(span);
    div.appendChild(data);
    return div;
}
function addNewData() {
    var form = this.form,
        fieldset = form.getElementsByTagName('fieldset')[0],
        divs = fieldset.getElementsByTagName('div'),
        data = newData(divs.length + 1);
 
    hideAll(divs);
    fieldset.appendChild(data);
    data.getElementsByTagName('input')[0].focus();
}
var form = document.getElementById('data');
form.elements.add.onclick = addNewData;
form.elements.add.click();
</script>
</body>
</html>

[fredykates]

thanks for spending your very precious time on this paul_wilkins.
very nice step by step tutorial. i think i'll be able to understand it now.

i really appreciate what you did.

thanks, thanks and many more thanks...