JavaScript two-dimensional Array to PHP

Question

I have to send a two-dimensional JavaScript Array to a PHP page. Indeed, I'm working on a form-builder, in which the user can add or remove fields.
These fields are added (or removed) using JavaScript (jQuery). When the user is done and hit a 'publish' button, I have to get all the fields concerned and send them to a PHP page which would build a real form with it.
I found a way to do it but I'm pretty sure it's not very clean :

addedFields = new Array();
$("#add-info .field").each(function() {
    addedFields.push(new Array($(this).find('.name').val(), $(this).find('.type').val(), $(this).find('.size').val()));
});

Basically, the ".field" class objects are <tr> and the ".name", ".type" and ".size" objects are inputs.
So I get an array of [name, type, size], then I convert it into a string using

addedFields = addedFields.join(";");

Finally, I go to the PHP form that way ;

document.location.href = "create.php?addedfields=" + addedFields;

Concerning the PHP code, I create a PHP array using the explode() function:

$addedFields = explode(";", $_GET['addedfields']);

and then I use it again for each element in the array:

foreach ($addedFields as $field) {
    $field = explode(",", $field);
    echo "<li>Field with name : '$field[0]', of '$field[1]' type and with a size of $field[2]</li>";
}

So it works, but it seems very dirty...

Tgr · Accepted Answer · 2010-05-06 13:45:13Z

1

Use the auto-array feature in PHP:

var data = {};
$("#add-info .field").each(function(i) {
  data['field['+i+'][name]'] = $(this).find('.name').val();
  data['field['+i+'][type]'] = $(this).find('.type').val();
  data['field['+i+'][size]'] = $(this).find('.size').val()]);
});
$.post("target.php", data);

then on the server side

var_dump($_POST['field']);
// array(
//   0 => array(
//     'name' => ...
//     'type' => ...
//     'size' => ...
//   ),
//   1 => ...

Edit: slightly more elegant version of the loop:

$("#add-info .field").each(function(i) {
  for (attr in {name: 1, type: 1, size: 1}) {
    data['field['+i+']['+attr+']'] = $(this).find('.'+attr).val();
  }
});

edited May 6, 2010 at 13:45

answered May 6, 2010 at 13:39

Tgr

28.4k13 gold badges88 silver badges123 bronze badges

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

Comments

jAndy · Accepted Answer · 2011-09-28 19:58:22Z

1

Put those input fields in a form-element. Use JSON like

var formData = $('form').serializeArray();
formData     = window.JSON.stringifiy(formData);

$.post('address', {addedfields: formData}, function(){});

something similar to that should do it in jQuery. on the backend convert the JSON into an object and loop through.

edited Sep 28, 2011 at 19:58

user142162

answered May 6, 2010 at 13:25

jAndy

237k57 gold badges313 silver badges363 bronze badges

2 Comments

Tgr Over a year ago

window.JSON is not cross-browser.

jAndy Over a year ago

true story, so a simple if(typeof(window.JSON) === 'object') should help out. If it's not available, implement a javascript JSON solution instead.

Daniel · Accepted Answer · 2010-05-06 14:34:06Z

0

Try consider using JSON to interact data between PHP and JavaScript.

JSON is built into Javascript and there is an awesome library for PHP. Check them out.

answered May 6, 2010 at 14:34

Daniel

8806 silver badges5 bronze badges

Collectives™ on Stack Overflow

JavaScript two-dimensional Array to PHP

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related