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
– Mohamed Haseel, Commented Dec 12, 2012 at 5:15
What do you mean phone_type[] is not a select tag? It's on an input. It's a dropdown. — Tyler Hughes
– Tyler Hughes, Commented Dec 12, 2012 at 5:23

bipen · Accepted Answer · 2012-12-12 05:21:58Z

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, 2012 at 5:21

answered Dec 12, 2012 at 5:10

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

5 Comments

Dennis Plucinik Over a year ago

Similar to this answer stackoverflow.com/questions/2019608/…

bipen Over a year ago

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...

Tyler Hughes Over a year ago

If I send the data that way how would I go about grabbing the data in PHP the page it is sent to?

bipen Over a year ago

if u r posting the data thn use..$_POST['inputname']

Dennis Plucinik Over a year ago

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.

epascarello · Accepted Answer · 2012-12-12 05:19:05Z

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, 2012 at 5:19

answered Dec 12, 2012 at 5:07

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

samazi · Accepted Answer · 2012-12-12 05:22:22Z

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, 2012 at 5:22

samazi

1,18112 silver badges25 bronze badges

1 Comment

Tyler Hughes Over a year ago

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?

Collectives™ on Stack Overflow

Javascript/Ajax/Json: Sending objects and arrays

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related