SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    confused with multidimensional array

    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

  2. #2
    SitePoint Member
    Join Date
    Apr 2011
    Location
    Toronto, Canada
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you're using there isn't javascript. That's mostly PHP with a few syntax errors.

    A multidimensional array looks like this:

    Code:
    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.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Baez View Post
    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:

    Code html4strict:
    <input name="data[]">
    <input name="data[]">
    <input name="data[]">
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by fredykates View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by paul_wilkins View Post
    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.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by fredykates View Post
    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.

    Code html4strict:
    <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.

    Code javascript:
    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.

    Code javascript:
    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.

    Code javascript:
    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.

    Code javascript:
    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.

    Code css:
    .hidden {
        display: none;
    }

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

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

    Code html4strict:
    <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>
    Last edited by paul_wilkins; Apr 6, 2011 at 01:41. Reason: removed onfocus part, due to IE compatability issue
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •