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: stackoverflow.com/questions/2433727/… — Quasdunk
– Quasdunk, Commented Nov 25, 2011 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
– Casey Flynn, Commented Nov 25, 2011 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
– Quasdunk, Commented Nov 25, 2011 at 18:23

Alex · Accepted Answer · 2011-11-25 19:00:11Z

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, 2011 at 19:00

answered Nov 25, 2011 at 18:19

Alex

1,6682 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Casey Flynn Over a year ago

On the server I'm still left with a serialized string

Alex Over a year ago

to get the data back from a json string use: json_decode() uk3.php.net/json_decode

Casey Flynn Over a year ago

jQuery.serialize() returns a string in url-encoded notation, not json unfortunately.

Alex Over a year ago

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) {)});

Casey Flynn Over a year ago

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?

Community · Accepted Answer · 2017-05-23 12:13:29Z

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, 2017 at 12:13

CommunityBot

11 silver badge

answered Nov 25, 2011 at 18:23

RicardoS

2,1481 gold badge22 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related