passing ajax associative array to php associative array

Question

I'm trying to pass form values to PHP via $.ajax method. I have following form in html:

<form>
<p>
   <label for="login">User ID:</label>
   <input type="text" name="login" id="login" value="user name">
</p>

<p>
   <label for="password">Password:</label>
   <input type="password" name="password" id="password" value="password">
</p>
</form>

and ajax:

$("form").submit(function(event) {
 var formInput = $('form').serialize();// tried with serializeArray() also

 var request = $.ajax({
    type: "POST",
    url:"../some.php", 
    data: {formInput:formInput},
    statusCode: {
                404: function() { alert("file not found");}}

 });

php:

<?
$data = $_POST['formInput'];
$data = array();
parse_str($_POST, $data);
print_r($data);
?>

On console it prints:

(
     [Array] =>
)

What I wanted was for $data to be an associative array as :

$data = array(
        'login' => 'foo'
        'password' => 'bar'
        );

but it seems like $data is being handled as a string... Thank you in advance!

xdazz · Accepted Answer · 2013-04-10 15:32:49Z

2

Use data: $('form').serializeArray() instead of data: {formInput:formInput},

And then in the php side, $_POST is just the data you want.

answered Apr 10, 2013 at 15:32

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

1 Comment

dts316 Over a year ago

Thanks for the response! This works. I guess data: {formInput: formInput}, puts already serialized array into an array again?! Thanks!

Adil Shaikh · Accepted Answer · 2013-04-10 15:45:02Z

2

you need to specify you want an associative array instead of an object from json_decode:

json_decode($data, true);

You might also need to do this -

$('form').serializeArray();

edited Apr 10, 2013 at 15:45

answered Apr 10, 2013 at 15:36

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

1 Comment

dts316 Over a year ago

.serializeArray() did it for me. Thanks!

Oussama Jilal · Accepted Answer · 2013-04-10 15:32:51Z

1

instead of this :

$("form").submit(function(event) {
 var formInput = $('form').serialize();// tried with serializeArray() also

 var request = $.ajax({
    type: "POST",
    url:"../some.php", 
    data: {formInput:formInput},
    statusCode: {
                404: function() { alert("file not found");}}
 });

use this :

$("form").submit(function(event) {
 var formInput = $('form').serialize();// tried with serializeArray() also

 var request = $.ajax({
    type: "POST",
    url:"../some.php", 
    data: formInput,
    statusCode: {
                404: function() { alert("file not found");}}
 });

answered Apr 10, 2013 at 15:32

Oussama Jilal

7,7592 gold badges33 silver badges54 bronze badges

3 Comments

dts316 Over a year ago

i'm sorry.. but i don't see the difference in the code... am i overlooking something??

Oussama Jilal Over a year ago

I changed this line : data: {formInput:formInput}, to this : data: formInput,

dts316 Over a year ago

works flawlessly with Adil's and Fresh's recommandation of using .serializeArray(). thanks

Fresheyeball · Accepted Answer · 2013-04-10 16:12:38Z

1

What we want is to serialize to a json object that can then be decoded. Use THIS pluggin to get access to .serializeObject.

$("form").submit(function(event) {
 var formInput = $('form').serializeObject();
 formInput = JSON.stringify(formInput);

 var request = $.ajax({
    type: "POST",
    url:"../some.php", 
    data: {formInput:formInput},
    statusCode: {
                404: function() { alert("file not found");}}

 });

Then on the php side you can decode the JSON easily

$data = json_decode($_POST['formInput'], true);

edited Apr 10, 2013 at 16:12

answered Apr 10, 2013 at 15:37

Fresheyeball

30.1k21 gold badges106 silver badges168 bronze badges

3 Comments

dts316 Over a year ago

Thank you for quick response. But, now it prints " </br> " only. It shows up as null.

dts316 Over a year ago

Thank you again for quick response! This was more than what I was looking for. Really apprciated!!

Fresheyeball Over a year ago

@dts316 cool! if this worked for you, please don't forget to hit the checkmark next to my answer so I can get credit.

dts316 · Accepted Answer · 2013-04-10 17:21:58Z

From great responses I've figured out what my issue was. When I was submitting POST i was putting array into an array.

the following ajax code:

$("form").submit(function(event) {
var formInput = $('form').serialize();// tried with serializeArray() also

var request = $.ajax({
type: "POST",
url:"../some.php", 
data: {formInput:formInput},
statusCode: {
            404: function() { alert("file not found");}}
});

was changed to:

$("form").submit(function(event) {
var formInput = $('form').serializeArray();

var request = $.ajax({
type: "POST",
url:"../some.php", 
data: formInput,
statusCode: {
            404: function() { alert("file not found");}}
});

And PHP was changed to:

<? $data = $_POST;
    print_r($data); ?>

on cosole it printed exactly what I wanted:

Array
(
[login] => admin
[password] => qwerty123!
)

Thank you everyone for quick responses

Collectives™ on Stack Overflow

passing ajax associative array to php associative array

5 Answers 5

1 Comment

1 Comment

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related