Reading/submitting a form with variable-length sets of fields, read as an array server-side

Question

I'm creating an html form that will allow a user to specify a variable-length number of fields to submit (fields added/removed client side via javascript).

I want to be able to deal with these submissions as a two dimensional array server side, something like:

array(
    array(
        'venue_name' = 'venue 1',
        'venue_description' => 'nighlife',
        'venue_street_address' => '111 fake street'
        ....
    ),
    array(
        'venue_name' ...
    )
);

enter image description here

This is the form HTML I'm working with:

<form>
    <div style="border:1px solid white;">
        <label>Venue Name:</label><br><input name="venue_name[]" type="text" /><br>
        <label>Description:</label><br><input name="venue_desc[]" type="text" /><br>
        <label>Street Address:</label><br><input name="venue_street_address[]" type="text" /><br>
        <label>City:</label><br><input name="venue_city[]" type="text" /><br>
        <label>State:</label><br><input name="venue_state[]" type="text" /><br>
        <label>Zip:</label><br><input name="venue_zip[]" type="text" /><br>
    </div>
    <div style="border:1px solid white;">
        <label>Venue Name:</label><br><input name="venue_name[]" type="text" /><br>
        <label>Description:</label><br><input name="venue_desc[]" type="text" /><br>
        <label>Street Address:</label><br><input name="venue_street_address[]" type="text" /><br>
        <label>City:</label><br><input name="venue_city[]" type="text" /><br>
        <label>State:</label><br><input name="venue_state[]" type="text" /><br>
        <label>Zip:</label><br><input name="venue_zip[]" type="text" /><br>
    </div>
</form>

I use jQuery's .serialize() function to submit the form to my server via ajax, and this is how it arrives:

team_name=team+wild&venue;_name[]=venue+1&venue;_desc[]=nighlife&venue;_street_address[]=111+Fake+Street&venue;_city[]=Boston&venue;_state[]=MA&venue;_zip[]=02115&venue;_name[]=venue+2&venue;_desc[]=desc&venue;_street_address[]=115+rake+street&venue;_city[]=Boston&venue;_state[]=MA&venue;_zip[]=03030

How might I go about converting this submission string to an array in the format I'm looking for, and is this the best way to go about handling a situation such as this? (variable length sets of form fields)

EDIT 1

jQuery.ajax({
            url: window.location,
            type: 'post',
            data: {
                    'vc_method': 'step_submit',
                    'fan_page_id': jQuery('#fan_page_id').html(),
                    'submit_data': jQuery(main_holder_body).find('form#setup_form').serialize()
                  },
            cache: false,
            dataType: 'json',
            success: function(data, textStatus, jqXHR){

                console.log(data);

            }
        });

Since you're creating the units dynamically, you could work with multiple arrays within the `name`-attributes here, e.g. `name="venue_name[0][]"` for the first one, `name="venue_name[1][]"` for the second one, etc. So this could be a part of your solution: http://stackoverflow.com/questions/2433727/submitting-a-multidimensional-array-via-post-with-php — Quasdunk, Nov 25 '11 at 18:13
@Quasdunk, could I use name="venue_name[][]" without specifying an actual index, the reason I ask is the user could create add three venues, making indexes 1,2,and 3. But then he/she deletes 2, I'm left with 1 and 3. It would be nice to not have to reorder my indexes. — Casey Flynn, Nov 25 '11 at 18:15
@CaseyFlynn Nope, you must provide an index for the first dimension. But you don't need to worry about the order and you don't have to take care of units being deleted, just always increase the index by 1 when something is being added - if neccessary, you can *very* easily handle everything else while itering the array on the PHP site it's posted to (e.g. check if the index is set, etc). — Quasdunk, Nov 25 '11 at 18:23

Alex · Accepted Answer · 2011-11-25T19:00:11.583

3

what you can try to do is:

for the first venue:

name="data[0][venue_name]"

for the second venue:

name="data[1][venue_name]"

Edit: try this:

var data = {};
        data.submit_data = jQuery(main_holder_body).find('form#setup_form').serializeArray();
        data.vc_method = 'step_submit';
        data.fan_page_id = jQuery('#fan_page_id').html();
        data.fan_page_id = jQuery('#fan_page_id').html();
        jQuery.ajax({
            url: window.location,
            type: 'POST',
            data: data,
            cache: false,
            dataType: 'json',
            success: function(data, textStatus, jqXHR){

                console.log(data);

            }
        });

edited Nov 25 '11 at 19:00

answered Nov 25 '11 at 18:19

Alex

1,630
1
20
31

On the server I'm still left with a serialized string – Casey Flynn Nov 25 '11 at 18:23
to get the data back from a json string use: json_decode() http://uk3.php.net/json_decode – Alex Nov 25 '11 at 18:25
jQuery.serialize() returns a string in url-encoded notation, not json unfortunately. – Casey Flynn Nov 25 '11 at 18:32
Ou.. then it should be accessible with the $_POST if you are using something like this: $.ajax({type:'POST',url:'/script.php',data:formdata, success: function(data) {)}); – Alex Nov 25 '11 at 18:36
I think my problem is that I need to include a few additional fields in addition to my form submission. It you check out my edit you'll see what I'm trying to submit. Is there any way to include some additional key/value pairs when I perform my ajax form-submit? – Casey Flynn Nov 25 '11 at 18:44

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

I think you are on the right way.

Just post these variable fiels like a list of checkboxes.

Take a look at https://stackoverflow.com/q/1557315/976948.

edited May 23 '17 at 12:13

Community

1
1

answered Nov 25 '11 at 18:23

RicardoS

2,088
1
21
22

Reading/submitting a form with variable-length sets of fields, read as an array server-side

2 Answers2