CODEWITHSUNDEEP
phpjquery
Nuevallorker
Nuevallorker

Reputation: 85

Cannot POST a multi-array from javascript into a PHP

I've searched through the forum but have not found any specific example relating to posting multi-arrays. Here's my problem:

I am doing the front end programming for an application my partner and I are writing. he has already done all the back end stuff but also created a working prototype front-end in PHP and HTML (circa 1991 style using tables for positioning... an absolute nightmare to read through).

I am re-coding everything from scratch using html/css/Jquery. I love jquery particulary for creating a dynamic form. In the use case, the customer is raising a new ticket (incident) with the provider related to a specific invoice. Since an invoice may contain dozens of line items, the customer can then also specify one or more items. In my code, I capture all of this in a multi-array which I then POST to a php page for processing.

My problem is that I cannot seem to find the right way to POST the data to the PHP from my JS code in a data structure it likes.

Onto the code:

Form Page

Each item the user enters in has a few fields. I wrap each one in a fieldset. 

$('.add_product').click(function(){
                    index++;
                    $(this).parent().parent().append("<fieldset>" +
                    "<label for='name'>Name</label><input type='text' alt='name' value='' id='" + this + "_name" + index + "'/>" +
                     "<label for='code'>Code</label><input type='text' alt='code' value='' id='" + this + "_code" + index + "'/>" +
                     "<label for='lotnumber'>Lot</label><input type='text' alt='lotnumber' value='' id='" + this + "_lotnumber" + index + "'/>" +
                     "<label for='expiration'>Expiration</label><input type='text' alt='expiration' value='' id='" + this + "_expiration" + index + "'/>" +
                     "<p class='remove_product'>Remove</p></fieldset>");

When the form is submitted, I select all the fieldsets into a multi-array like this: 

 var postValues={};
 var i=0;
                $('fieldset').each(function(){

                    postValues[i]={"VarChar08":"","VarChar07": $(this).parent().parent().attr('id'),"VarChar14":"P" , "VarChar09": $(this).find('input[alt="name"]').val(), "VarChar10": $(this).find('input[alt="code"]').val(), "VarChar11": $(this).find('input[alt="lotnumber"]').val(), "VarChar12": $(this).find('input[alt="expiration"]').val(),"VarChar13":"","VarChar20":"1"} ;
                    i++;

                });

My last attempt was to JSON stringify the array: 

var itemValues= JSON.stringify(postValues);

then I post them to the php processor page:

 $.post("some.php", {items: itemValues});

PHP Processor Page

$itemValues=json_decode($_POST['items']);
$items = $itemValues;

// read into POST values for submitting to a stored procedure
foreach ($items AS $m => $tmp_items){
        $_POST['VarChar09'] = $items[$m][3]; // name
        $_POST['VarChar10'] = $items[$m][4]; // code
        $_POST['VarChar11'] = $items[$m][5]; // lot
        $_POST['VarChar12'] = $items[$m][6]; // expiry
}

Unfortunately this isnt working. The PHP processor page is not reading the data structure properly and therefore the values don't get assigned properly. I'm afraid i've reached the limits of my experience. I suspect its possible there is a flaw in my understanding of the data structure from the javascript side. I haven't yet been able to get my head around the whole idea of having an object of arrays, an object of objects, an array of objects or an array of arrays. Though again, this may or may not have anything to do with it.

Any help is much appreciated!

Upvotes: 0

Views: 140

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Your input elements have sevral problems. First this is a DOM eleemnt that you are trying to concatenate into html string.

input elements have no name which is required for field to submit and create the key for $_POST

With a name attribute for element you can use serialize() to generate all the form data rather than hard coding the data object yourself.

var data=$('#formID').serialize();

 $.post("some.php", data, function(response){
     /* ajax success... do something with response if needed*/
 });

API reference: http://api.jquery.com/serialize/

Now your php $_POST keys will match names in fields

Upvotes: 0

Related Questions