Results 1 to 2 of 2

Thread: Is there a better way than "getElementById" and a for loop to retrieve data?

  1. #1
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Is there a better way than "getElementById" and a for loop to retrieve data?

    Hi everyone,
    I have been working on a script that dynamically generates a pair of textboxes then assigns the user's input from each text box "a" into array "a" and the inputs from each text box "b" into array "b".

    With my limited knowledge of javascript, I used div tags to help create the pairs of text boxes when the user clicks on "add pair" and I named each text box in the form a[ i ] and b[ i ], where i is intially zero and increases by one each time a pair of textboxes is added.

    But whenever, I tried to obtain the value of, say, b[2] there was an error that said b[2] was null or not an object. It didn't look like arrays "a" and "b" were being formed. In fact, the only way I managed to retrieve the values from the text boxes was using "getElementById" and resorting to a for loop in order to make the arrays. I've never used "getElementById" before but that method only appears to be able to get elements from one pair of text boxes.

    I have added a sample of the code below if anyone wants to take a look at it, I would appreciate any advice.

    Cheers,
    Rob

    P.S. The function test() is just supposed to assign the input into the two arrays using the for loop I mentioned and show you the various index and array values as it assigns them. The plus sign is just supposed to act as a separator. If it did work and you were to add 3 pair of text boxes and not change the preset values, the output should look like:

    i=2 j=0 a=1 b=2 <--- It stops at this point for some reason
    i=2 j=1 a=1,1 b=2,2
    i=2 j=2 a=1,1,1 b=2,2,2

    (You should note that i = [no. of pairs]-1, "j" is the increment in the for loop and a & b are the growng arrays.)

    <html>
    <head>
    <script>
    <!--
    var a = [];
    var b = [];
    var i = 0;

    //adds pair of text boxes a[i] and b[i] in the div tags called div
    function addPair() {
    var c=document.getElementById("div");
    c.innerHTML+="+ <input type='text' value='1' size=1 name='a[" + i + "]' id='a[" + i + "]'>";
    c.innerHTML+=" and <input type='text' value='2' size=1 name='b[" + i + "]' id='b[" + i + "]'> ";
    i++;
    }

    //tries to make the arrays that i thought would have formed above
    function test() {
    for (j=0;j<=i;j++)
    {
    a[j]=document.getElementById("a["+j+"]").value
    b[j]=document.getElementById("b["+j+"]").value
    document.write("i=" + i + " j=" + j + " a=" + a + " b=" + b + "<br>")
    }
    }
    // -->
    </SCRIPT>
    </head>

    <body>
    <form>
    <div id="div"></div><input type="button" value="Add pair" onclick="addPair()"/>
    <INPUT TYPE="button" VALUE="Test" onClick="test()">
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry, the for loop should go until the value of j is "j<=(i-1)" not "j<=i" but that would only affect the last iteration.

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
  •