Why does this semicolon appear if I use jQuery serialize() on inputs with square brackets in the name?

Question

I have the following HTML:

<input type="checkbox" id="options_1" value="options_1" name="options[]">  
<input type="checkbox" id="options_2" value="options_2" name="options[]">  
<input type="checkbox" id="options_3" value="options_3" name="options[]">

I check the first two options and send it to the server via ajax in jQuery:

$.ajax({
    type: "POST",
    url: "myfile.php",
    data: {
        'options':$('input[name="options[]"]').serialize()
    },
    dataType: 'json',
    beforeSend: function(){
           //do some stuff
    },
    success: function(msg){
        //do some stuff
    }
});

Firebug shows me the data that has been posted:

options options%5B%5D=options_1&options%5B%5D=options_2
So far, so good.

In myfile.php I get the POST-Variable like this:

$options = $_POST['options'];

Now when I echo $options I get this:

"options[]=options_1&options;[]=options_2"

Where does this semicolon in front of the second pair of brackets come from? This is driving me crazy.

I already used utf8_decode on the POST data as well as urldecode and rawurldecode. Nothing changes. I also escaped the square brackets in the ajax call like this:

data: {
    'options':$('input[name="options\\[\\]"]').serialize()
},

That didn't help either. Any ideas anyone?

DominicM · Answer 1 · 2012-12-15T23:08:03.373

2

I had this exact problem, and I was only able to get it to work by using ".serializeArray()", I hope this was what you were looking for.

data: {
    'options':$('input[name="options[]"]').serializeArray()
},

For me this outputs standard string in the same format as GET requests.

edited Dec 15 '12 at 23:08

answered Jul 18 '12 at 15:25

DominicM

6,520
13
39
60

score 1 · Answer 2 · edited May 23 '17 at 10:27

1

I recommend to remove [] from html names, it's bad design. There can be a problem on jQuery side or PHP too. I can see no other problems in your code.

What characters are allowed in the HTML Name attribute?
What are valid values for the id attribute in HTML?

edited May 23 '17 at 10:27

Community

1
1

answered Dec 17 '12 at 09:06

Peter Ivan

1,467
2
14
27

score 0 · Answer 3 · answered Aug 01 '13 at 09:40

You might want to read this and try this:

data: {
        'options':$('input[name="options[]"]').replace('%5B%5D', '[]') 
    },

or this

$.param(obj, true);

The true in the $.param indicates the traditional method of serializing an object should be used. The traditional method does not use square brackets when it encounters the same parameter name.

score 0 · Answer 4 · answered Apr 05 '11 at 18:15

0

Why do you use the brackets[] and the same name for each input element? If I get you right you can serialize by a wrapping element..

<form id="options">
    <input type="checkbox" id="options_1" value="options_1" name="option1" />  
    <input type="checkbox" id="options_2" value="options_2" name="option2" />  
    <input type="checkbox" id="options_3" value="options_3" name="option3" />  
</form>

So you can serialize like

data: {
    'options':$('#options').serialize()
},

answered Apr 05 '11 at 18:15

Sam Segers

1,951
2
22
28

Hi Sam, thanks for your answer. I use the same name, because then I can use "parse_str" in php which then automatically generates an array named $options. That's handy, because there are actually more checkboxes than just 3. – Andreas Apr 06 '11 at 07:36
No, I didn't. The semicolon still appears and I have no clue why. – Andreas Apr 20 '11 at 14:32
1

I can only suggest to do it in an other way then.. anyway tested it now without any problems echo $options; parse_str($options); print_r($options); gives in firebug: __ options%5B%5D=options_1&options%5B%5D=options_2&options%5B%5D=options_3 Array ( [0] => options_1 [1] => options_2 [2] => options_3 ) __ With jquery 1.5.2 – Sam Segers Apr 28 '11 at 13:21

Why does this semicolon appear if I use jQuery serialize() on inputs with square brackets in the name?

4 Answers4