Jquery form serialize issue

Question

I have a form

<form method="post">

<input type="text" name="name" /><br />
<input type="text" name="test1" /><br />
<input type="text" name="test2" /><br />
<input type="text" name="test3" /><br />
<input type="text" name="test4" /><br />
<input type="text" name="test5" /><br />
<input type="text" name="test6" /><br />
<input type="submit" name="submit" /><br /></form>

And i wrote a jquery ajax script like this

$(":input[ name= 'submit']").click(function(){

    var values = $("form").serialize();

    $.ajax({
        url:"test.php",
        type:"post",
        dataType:"json",
        data: {
            method: "test",
            data: values
        },
        success: function(){
            alert("success");
        },
        error:function(){
            alert("failure");
        }   
    }); 
    return false;   
});

data: { method: "test", data: values }

But when i pass two parameters in ajax.data element, i cannot access it as $_POST['name'] or $_POST['test1'] at server side. But it is possible if i add only one parameter to the ajax.data element.

Please get me a solution

score 2 · Answer 1 · answered Apr 02 '12 at 11:15

2

The .serialize method already converts the form values into key/value pairs that must be sent as-is to the server. If you want to pass additional values you could use a hidden field in the form.

Like this:

<form method="post">
    <input type="hidden" id="method" name="method" value="test" />

    <input type="text" name="name" /><br />
    <input type="text" name="test1" /><br />
    <input type="text" name="test2" /><br />
    <input type="text" name="test3" /><br />
    <input type="text" name="test4" /><br />
    <input type="text" name="test5" /><br />
    <input type="text" name="test6" /><br />

    <input type="submit" name="submit" /><br />
</form>

and then:

$('form').submit(function() {
    var values = $(this).serialize();
    $.ajax({
        url: "test.php",
        type: "post",
        dataType: "json",
        data: values,
        success: function(){
            alert("success");
        },
        error:function(){
            alert("failure");
        }   
    }); 
    return false;   
});

and if you need to set some other value just before sending the AJAX request:

$('#method').val('some other value');

Also notice that I subscribed to the .submit event of the form instead of the click event of the submit button which will also properly handle the case when the user presses the Enter key while inside some of the input elements, whereas your code won't be triggered because the submit button was never clicked and yet the form was submitted.

answered Apr 02 '12 at 11:15

Darin Dimitrov

1,023,142
271
3,287
2,928

i just want to know why is that happening – user1066679 Apr 02 '12 at 11:18
It's happening because as I already stated in my answer the .serialize method converts the form values into `application/x-www-form-urlencoded` request ready to be sent as-is. In your case you are modifying this by adding some other elements and break this convention. You should not be modifying the data parameter once you serialize it. – Darin Dimitrov Apr 02 '12 at 11:19
I don't see what how is this related to the problem. Yes, there is another possibility. Take a look at this answer: http://stackoverflow.com/a/4807324/29407 and more specifically the `serializeObject` plugin shown. – Darin Dimitrov Apr 02 '12 at 11:22
When i enter $_POST['data'] it gives me an output like "name=abc&test1=&test2=&test3=&test4=&test5=&test6=" but echo $_POST['data']['name'] gives me "n".Why? – user1066679 Apr 02 '12 at 11:37
Did you use the .serializeObject plugin I've linked to? In your script you could fetch the values like that `$_POST['method']` and `$_POST['data[name]']`, ... assuming you sent the request like that: `data: { data: $(this).serializeObject(), method: 'some value' }`. – Darin Dimitrov Apr 02 '12 at 11:39
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/9589/discussion-between-user1066679-and-darin-dimitrov) – user1066679 Apr 02 '12 at 11:47
Well then I guess the hidden field is the way to go. Good luck. – Darin Dimitrov Apr 02 '12 at 11:47
however when use json its fail to do ajax call ... without it its success request .. or may be i am mistaken .. – NullPoiиteя Jan 08 '13 at 14:58
This is GREAT ANSWARE! – Aug 16 '15 at 05:47

Nicola Peluchetti · Answer 2 · 2012-04-02T11:44:08.803

1

You should do

   data: values,

in this way you can get your data $_POST['test1'];

if you need to send extra data use hidden fields

EDIT if you use two fields like in your exampel you will have the data in $_POST['data'] (here you will have the serialized form) and $_POST['method']

EDIT 2 actually $_POST['data'] is a string (name=abc&test1=&test2=&test3=&test4=&test5=&test6= ) because a string is set to the server, if you access $_POST['data']['name'], this returns n because in php you can access string as arrays, in your case you are not passing a valid index and it returns the first characther

$name = "aghjsghjgj";
echo $name['name'];//this echoes the first letter as name is not a valid index

echo $name[2];//this echoies the third letter , h

http://codepad.org/ferFnrKW

edited Apr 02 '12 at 11:44

answered Apr 02 '12 at 11:16

Nicola Peluchetti

76,206
31
145
192

but why php cannot get that if i pass two arguments.Please describe – user1066679 Apr 02 '12 at 11:20
OK when i enter echo $_POST['data']; It gives me an output like name=abc&test1=&test2=&test3=&test4=&test5=&test6= but when i enter $_POST['data']['name'] it gives me "n".Why? – user1066679 Apr 02 '12 at 11:30
@user1066679 there is no `$_POST['data']['name']`, i edited my aanswer – Nicola Peluchetti Apr 02 '12 at 11:44

Jquery form serialize issue

2 Answers2