HTML checkbox form and HTTP URL

问题

So, I have this HTML form:

<form id="search_form" class="form_wrapp"
    accept-charset="utf-8" method="get" action="http://testing.com/results">
    <input class="inputbox" type="text" name="search_query">
    <input class="ic_search" type="submit" value="">

    <input type="checkbox" value="checkbox1" name="search_filter[]">
    <label for="Checkbox1">Checkbox1</label>
    <input type="checkbox" value="checkbox2" name="search_filter[]">
    <label for="Checkbox2">Checkbox2</label>
</form>

and it redirects to this URL upon submit with the 2 checkboxes checked

results?search_query=dreams&search_filter[]=checkbox1&search_filter[]=checkbox2

It works like this (inside codeigniter I get the data with $this->input->get('search_filter')), but my question is: I am doing something wrong inside the form, or this is how it's supposed to work? And I mean about: &search_filter[]=checkbox1&search_filter[]=checkbox2. Shouldn't it be something like: &search_filter[]=checkbox1,checkbox2 ? And if not, how can I make it work like that?

回答1:

If you want it in the comma format you can do the following:

$filters = (array) $this->input->get('search_filter');
$filters = implode(',',$filters);

If you want to alter the format in which the form is submitted, assuming jquery for js:

$('#search_form').submit(function() {
   var $hidden = $('<input type="hidden" name="search_filter" />').appendTo($(this)),
       $filters = $('input[name^=search_filter]'),
       value = '';

      //loop through the filters check if there checked and add them to the value

      $hidden.val(value);

      $filters.remove();       
});

Of course if the user doesn't have js enabled it will submit natively

回答2:

Am I doing something wrong inside the form, or this is how it's supposed to work?

That's how it's supposed to work. At least if you need to read query string with PHP, those brackets need to be there to read the whole query string without each search_filter value being overwritten by the next one.

And if not, how can I make it work like that?

If you have to, you can use a POST request instead, process the submission, and redirect to the URL of your choice with whatever query string you want.

From your comment:

I wanted to make the url like this &search_filter[]=checkbox1,checkbox2 just to make it a bit more "beautiful"

Don't worry about that, seriously. The only time this matters is when you're doing extreme SEO and you don't want two URLs that point to the same place. It's common practice in those cases to remove all unused keys and alphabetize them so that all URLs with query strings are consistent, but mangling them into something custom still isn't a part of that.

Besides that, don't fight against the behavior - work with it - it's not "broken" and making it "beautiful" won't matter to anyone, plus you'll have to guess/remember which pages process query strings the correct way, and which ones use your "custom" method.

回答3:

I am doing something wrong inside the form, or this is how it's supposed to work?

That is how it is supposed to work

Shouldn't it be something like: &search_filter[]=checkbox1,checkbox2 ?

Then you couldn't tell the difference between two items and one item that had a comma in it.

And if not, how can I make it work like that?

Obtrusive JavaScript. Don't do that. Forms work well the way they work.

回答4:

That's perfectly normal. form data is always sent in key=value pairs, with one single value. Submitting key=value,value is not part of the HTTP spec, and would have the values treated as a single monolithic string, not two separate comma-separated values.

You can certainly use some JS to rebuild your form on the fly to use the value,value format, but then you'll have to mod your server-side scripts to accept that new format as well. PHP won't auto-split the values before you, because it's not a standard representation.

回答5:

&search_filter[]=checkbox1,checkbox2

Why you need this?

Use this like:

<?php

$searchFilter = $this->input->get('search_filter');

foreach($searchFilter as $filter)
    // some actions with filters.

You search_filter[] is simple array with values from checkbox inputs.

来源：https://stackoverflow.com/questions/8911313/html-checkbox-form-and-http-url