treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Rewritten: jQuery / How do I use an array

  • I removed my other post, because it was too long...and have revised my question, to simplify things.

    Situation: I have a series of checkboxes on a page, and each time a box is clicked, the value gets amended an array, then take the content of that array and build a url which should be loaded using .load. If the box is unchecked, I would like that value removed from the array and url rebuild and new page loaded.

    Question 1: Once a box is clicked how can I store that value to an array?
    Question 2: How do I build the .load url with an array?


    Here is the code I have so far...which works (kinda)

    <script type=\"text/javascript\">
    $(function(){
    $(\"form#explore input:checkbox\").click(
    function () {
    var box = $(this).val();
    if ($(this).is(':checked')) {
    $(\"#something\").load('/c2/index.php/research/test/' + box);
    } else {
    // alert('Not Checked ' + box);
    }
    });
    });
    </script>


    This only works for one checkbox at a time...as there is currently no array. Can someone explain how I can store a clicked value?

    I kinda think I need to do something more like...

    If a box is checked, see what other boxes are checked and then send the values of all the boxes that are checked.

    Then, when a box is unchecked, check what boxes are checked and then resend the values in a url. Thoughts?

    Thanks!
  • The way you got your code working is everytime they click on a checkbox it will post information to server and load

    From how you are explaining im not sure what the end product is supposed to do anyways to answer you question if you want to store all the checkboxs in an array it would be done like this


    <script type=\"text/javascript\">
    $(function(){
    var checkData = array();

    $(\"form#explore input:checkbox\").each(function () {
    checkData[] = $(this).val();
    });
    });
    </script>

    <form id=\"explore\">
    <input type=\"checkbox\" value=\"something\"/>
    <input type=\"checkbox\" value=\"somethingElse\"/>
    </form>


    From the example above the array will have ["something","somethingElse"]

    For second Question:

    Depends on what language you are using, python, perl, php, ruby ect? but the universal way is to send a long string



    <script type=\"text/javascript\">
    $(function(){
    var checkData = array(),
    $form = $('form#explore');


    $form.find(\"input:checkbox\").each(function () {
    checkData[] = $(this).val();
    });
    $form.submit(function(){
    $.post('/link/to/file/', {data : checkData.join(', ')} );
    });

    });
    </script>

    <form id=\"explore\">
    <input type=\"checkbox\" value=\"something\"/>
    <input type=\"checkbox\" value=\"somethingElse\"/>
    </form>


    This will send "something, somethingElse" to the sever

    ((php: $_POST['data'] == "something, somethingElse" ))


    Then you could split that string back into a array or defintion list (all depending on the language)
  • $.post('/link/to/file/', {data : checkData.join(', ')} );

    That is not the best way to send data to a php script.

    The most efficient way is to use a subscripted variable, this way the data will be accessible as an array in the php script.

    For example:

    $.post('/link/to/file/', { 'data[]' : checkData });


    Now in php the posted data will be available as an array:

    $_POST['data'][0]
    $_POST['data'][1]
    etc...
  • Your probably right