Pass Javascript array into PHP array via form submission

Question

Okay so I'm working on a Wordpress plugin that allow ones to change to order of an option. The option is stored as an array in php ie update_option('box_order',$box_array); I have echoed out an array of these boxes in order onto a page that has jQuery UI to allow for dragging reordering.

I listen for reordering and call this function via JS

var order = jQuery( "#sortable" ).sortable( "toArray" );//get array of ids in order
jQuery('input.order-display').val(order); //set input field val to order array

This all works fine and I get the input[type=text] displaying the new order on shuffle.

However - I have a submit button and once ordering is finished I need to submit the form. The thing is I am working along side an existing plugin that cannot be modified. This PHP plugin takes the inputs contents and calls update_option('box_order',$_POST['input_name']);

Do you guys have any suggestions as to how I can make the javascript array match the syntax of a php array exactly so that when the form is submitted it is used to update the Wordpress option via the plugin that I have no control over. I don't want to name the plugin as it is a surprise project but I'm building an open source addition.

I know about JSON.stringify() etc but that is not an option as only the $_POST of the input itself is being listened for by the PHP plugin.

Thanks!

Answer 1

I can think of two things:

1. dynamically create <input name="input_name" /> boxes and submit the form as per normal. This wouldn't have my preference, it's a bit hackish.

2. use AJAX to post into PHP, using input_name: jQuery.param(order) to serialize an array into a format that will make PHP to treat the POST data as an array. See also: http://api.jquery.com/jQuery.param/