Javascript/Ajax/Json: Sending objects and arrays

Question

I have a form where people enter their clients into.

This form allows the user to add as many phone numbers, emails, and addresses as they want.

Phone and email have type and data fields for each added row (phone_type, phone_data) while Address has type, street, city, state, and zip fields for each row (address_type, address_street, address_city, address_state, address_zip).

So for example, when the user adds a phone field it adds:

<input type="text" name="phone_type[]" />
<input type="text" name="phone_data[]" />

I need to send the form data over Ajax to a PHP to process and store in database.

I've thought of storing it in array within an object.

phone = new Object();
var phone.data = new Array(), 
phone.type = new Array();
$("input[name='phone_data[]']").each(function() {
  if($(this).val() != '') {
  phone.data.push($(this).val());
  phone.type.push($('select[name="phone_type[]"]').val());
})

This doesn't seem to work. Am I even approaching this correctly?

Also, once I get it into an object that I send over Ajax to a PHP page, how do I grab the values?

by the way phone_type[] is not a select tag. Maybe that is causing a 'undefined' exception — Mohamed Haseel, Dec 12 '12 at 05:15
What do you mean phone_type[] is not a select tag? It's on an input. It's a dropdown. — Tyler Hughes, Dec 12 '12 at 05:23

bipen · Accepted Answer · 2012-12-12T05:21:58.017

3

serialize your form... use data of ajax to sent the serialize data to the server...

 data:$('#YourFORMID').serialize();

here is the documentaiotn have alook to the examples...

http://api.jquery.com/jQuery.post/

and to grab the data in your PHP (if you are using ajax type as post)

 $data=$_POST['phone_data'];
 $type=$_POST['phone_type'];

if ajax type : GET

 $data=$_GET['phone_data'];
 $type=$_GET['phone_type'];

edited Dec 12 '12 at 05:21

answered Dec 12 '12 at 05:10

bipen

36,319
9
49
62

1

Similar to this answer http://stackoverflow.com/questions/2019608/pass-entire-form-as-data-in-jquery-ajax-function – Dennis Plucinik Dec 12 '12 at 05:14
if that is an answer thn.. you post it as an answer.... not as comment.... and if you want to post this as comment, you can use add comment in the question... – bipen Dec 12 '12 at 05:18
If I send the data that way how would I go about grabbing the data in PHP the page it is sent to? – Tyler Hughes Dec 12 '12 at 05:18
if u r posting the data thn use..$_POST['inputname'] – bipen Dec 12 '12 at 05:19
I did actually post it as an answer originally but SO said it was "trivial" and added it as a comment. Took me a few tries before I figured out what was going on. – Dennis Plucinik Dec 12 '12 at 05:31

epascarello · Answer 2 · 2012-12-12T05:19:05.117

1

Are you trying to reinvent jQuery's serialize()

var frm = $("#myForm");
var values = frm.serialize();

//make Ajax call
$.post("someUrl", values, function(){} );

http://jsfiddle.net/BZcja/

edited Dec 12 '12 at 05:19

answered Dec 12 '12 at 05:07

epascarello

204,599
20
195
236

score 1 · Answer 3 · answered Dec 12 '12 at 05:22

1

You can most definitely use jQuery serialize(). In your event which triggers the processing you can do the following:

$.ajax({  
    type: "POST",  
    url: "your_php_processing_page.php",  
    data: $("#FormID").serialize(),  
    dataType: "json",  
    success: function(data){
        // do stuff here
    },  
    error: function() {  
        // do stuff here             
    }  
});

In your_php_processing_page.php you can get the values as follows:

$phone_types = $_POST["phone_type"];
$phone_data = $_POST["phone_data"];

answered Dec 12 '12 at 05:22

samazi

1,161
12
24

Thanks for summing it up. You also helped me realize a better way to send over ajax. One more question though. I have phone_type[] and phone_data[] 'linked' meaning that I need to get data of the ones next to each other because they were meant to be together. How do I know how which one goes with which in PHP? – Tyler Hughes Dec 12 '12 at 05:25

Javascript/Ajax/Json: Sending objects and arrays

3 Answers3