Pass an array through jquery ajax
<p>I have jquery generating a list item with a couple of input fields when someone clicks on a particular link.  The link looks like this:</p>

<pre><code>&lt;a href="#" id="add_sublink" data-sublink_count = "0"&gt;Click Here to add more sub links&lt;/a&gt;
</code></pre>

<p>The jquery looks like this</p>

<pre><code>$('#add_sublink').live("click", function(){

    var count  = $(this).attr('data-sublink_count');
    var form = "&lt;li&gt;Link Name:&lt;br /&gt;" +
           "&lt;input type='text' size = '40' id='sublinkname' name='sub_link_name_" + count + "' value=''/&gt;&lt;br /&gt;" +
           "Link URL:&lt;br /&gt;" +
           "&lt;input type='text' size = '40' id='sublinkurl' name='sub_link_url_" + count + "' value=''/&gt;" +            
           "&lt;/li&gt;";


        $('#sublink_list').append(form);
        var newcount = ( Number(count) + Number(1) );
        $(this).attr('data-sublink_count', newcount)

    return false;                       

});
</code></pre>

<p>This is the html that it generates</p>

<pre><code>&lt;li&gt;Link Name:&lt;br&gt;
&lt;input type="text" value="" name="sub_link_name_0" id="sublinkname" size="40"&gt;&lt;br&gt;
Link URL:&lt;br&gt;
&lt;input type="text" value="" name="sub_link_url_0" id="sublinkurl" size="40"&gt;&lt;br&gt;
&lt;/li&gt;
</code></pre>

<p>Each time they click on the link a new list item is added. I am also counting them and putting the count on the name so each input item is unique.</p>

<p>I may have 1 or more list items with the input values in them.  When a submit button is clicked then I am collecting the information with jquery and trying to send the information through ajax.</p>

<pre><code>    $('.save_link').live('click', function() {
    var linkID = $(this).attr('data-link_id');

        $('#sublink_list').children().each(function(index) {
            var this_sublink_name = $(this).find('#sublinkname').val();
            var this_sublinkurl = $(this).find('#sublinkurl').val();        

            sub_array[index]['name'] = this_sublink_name;
            sub_array[index]['url'] = this_sublinkurl;                          

            var index = ( Number(index) + Number(1) );

        }); 

        //send the info
        $.ajax({
            url: 'update_link.php', 

            data: jQuery.extend(
                {linkID: linkID},                                           
                {sub_array: sub_array}),        
            type: 'POST',    
            success: function(results) {        
                if (results == "error"){
                    //then display an error                                                     
                }else{                          
                    //display success                                                       
                }                                           
            }
        });


return false;
});
</code></pre>

<p>Everything works fine, but the ajax is not sending the array <code>sub_array</code> correctly.  </p>

<p>I have read other places that suggest sending the array like this</p>

<pre><code>{'sub_array[index][name]': 'value'} //value would be replaced with the actual value
</code></pre>

<p>But since the list items are dynamic, I don't know how many there will be, nor do I know the value.</p>

<p>I have also tried sending the data like this:</p>

<pre><code>data: 'linkID=' + linkID +                                          
      '&amp;sub_array=' + sub_array,
</code></pre>

<p>But it also did not work.</p>

<p>In this case, what is the best way to send a multi-dimensional array with an unknown number of array items, and unknown values?</p>
