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?

Answer 1

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.

Answer 2

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?