#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    Florida
    Posts
    8
    Rep Power
    0

    Question accessing array variables from HTML form in JavaScript


    I have a checkbox section to my form (where the are like 20 checkboxes the user can pick from. The user can pick none, all or any number inbetween.) Each checkbox is named "cat[]" and has a different value, ie

    <form name="frmSignUp">
    <input type="checkbox" name="cat[]" value="1">
    <input type="checkbox" name="cat[]" value="2">
    <input type="checkbox" name="cat[]" value="3">

    Using JavaScript, How do I loop through this array to access the array values?

    Here's how I am trying to do it now, and it isn't working:

    for (i = 0; i <document.frmSignUp.cat.length; i++)
    {
    // statements using cat[i]
    }
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    Florida
    Posts
    8
    Rep Power
    0

    still can't access array elements


    I still can't get it to work.

    Based on the explanation in the thread referenced, I am using this code now in my JavaScript:


    function valCat()
    {
    if (window.document.frmSignUp.elements['cat[0]'].checked == true)
    {
    alert("Yup, first cat is checked!");
    } else
    {
    alert("Nope, first cat is not checked.");
    }
    return false;
    }


    and calling this function when my form is submitted.


    and instead of getting an alert message one way or another, nothing happens. the form just submit with no alert.

    -Todd
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    The 'return false' suggests you might want to use this as a validator of sorts - in which case you'll need some additional code - but, here...

    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">

    function valCat(f) {
    for (var i=0; i<f['cat[]'].length; ++i)
    if (f['cat[]']&#91;i].checked)
    alert('Yup, cat ' + f['cat[]']&#91;i].value + ' is checked!');
    else alert('Nope, cat ' + f['cat[]']&#91;i].value + ' is not checked.');
    }

    </script>
    </head>
    <body>
    <form name="frmSignUp" onsubmit="valCat(this)">
    <input type="checkbox" name="cat[]" value="1"> cat 1<br>
    <input type="checkbox" name="cat[]" value="2"> cat 2<br>
    <input type="checkbox" name="cat[]" value="3"> cat 3<br><br>
    <input type="submit" value="CAT check">
    </form>
    </body>
    </html>

    Important: this is not *PHP*. The array name is 'cat[]' - that's a string (literal). The brackets signify nothing, they're just characters. elements['cat[0]'] references an array named 'cat[0]' which, naturally, doesn't exist.

    Referencing the .options collection is, erm, optional (Form[element_name] is sufficient - take your pick).

IMN logo majestic logo threadwatch logo seochat tools logo