comma seperated checkbox $_GET query request with jquery

Question

Trying to create a search function using multiple checkboxes, but seem to be only finding information related to $_POST requests.

<input type="checkbox" name="fruit" value="1">
<input type="checkbox" name="fruit" value="2">
<input type="checkbox" name="fruit" value="3">
<input type="checkbox" name="fruit" value="4">
<input type="checkbox" name="fruit" value="5">

What is the best way to get the query to look like this

search?fruit=1,2,3,4

Is there a way to do this non ajax?

Just to clarify...

Each value represents a different fruit.

Originally I did this

search?apple=1&orange=1

As I added more checkboxes, the query seemed inefficient.

I know that I can add the checkboxes into the array using the $_POST method

<input type="checkbox" name="fruit[]" value="1">
<input type="checkbox" name="fruit[]" value="2">

As a few have suggested using this technique for a $_GET query would look something like this

search?fruit[]=1&fruit[]=2&fruit[]=5

So the question is really how to clean it up (comma seperated)

Checkboxes need distinct names; radio buttons share the name attribute. — j08691
– j08691, Commented Feb 7, 2014 at 2:05
... or they need to be named with [] wherein PHP will receive them as an array name="fruit[]" but that will make the query string search?fruit[]=1&fruit[]=2&fruit[]=5 If you want to make it a comma-separated list, you will need to script it. — Michael Berkowski
– Michael Berkowski, Commented Feb 7, 2014 at 2:07
Why would you want these comma-separated? There's no way to do that without JavaScript (but you don't need to do it via AJAX). — Brad
– Brad, Commented Feb 7, 2014 at 2:07

John S · Accepted Answer · 2014-02-07 16:02:25Z

4

NOTE: As others have pointed out, it isn't necessary to pass a single parameter with a comma-separated value to end up with an array or a comma-separated value on the server. Frameworks like PHP can handle this with no JavaScript required. You can simply give each checkbox the same "name" attribute. That will cause multiple parameters with the same name to be passed to the server, which is just fine. In fact, it is the same result you would get if you used a <select multiptle="multiple"> element.

In PHP, if you use a name with square brackets at the end, like fruit[], you can then get an array on the server with:

$_GET['fruit']

And if you want a comma-separated value on the server, you can use:

implode(',', $_GET['fruit'])

But if you really want a single parameter with a comma-separated value, here is how you can do it:

You can use a form with a hidden input. Set the form's "method" to "get" and the hidden input's "name" to "fruit". Then add an event handler that sets the value of the hidden input to the comma-separated string when the form is submitted.

HTML:

<form id="fruitForm" action="search" method="get">
<input type="hidden" name="fruit" />
<label><input type="checkbox" value="1" />apple</label><br />
<label><input type="checkbox" value="2" />banana</label><br />
<label><input type="checkbox" value="3" />orange</label><br />
<label><input type="checkbox" value="4" />pineapple</label><br />
<label><input type="checkbox" value="5" />grapefruit</label><br />
<button type="submit">submit</button>
</form>

JQuery:

$('#fruitForm').submit(function() {
    var fruits = $('#fruitForm').find('input:checkbox:checked').map(function() {
        return $(this).val();
    }).get().join(',');

    $('#fruitForm').find('input[name=fruit]').val(fruits);
});

Note: The checkbox elements do not have "name" attributes, so they do not get included in the form submission.

jsfiddle

edited Feb 7, 2014 at 16:02

answered Feb 7, 2014 at 2:26

John S

21.5k9 gold badges50 silver badges59 bronze badges

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

5 Comments

maček Over a year ago

You can just use fruit[] as the input name and PHP (and some other frameworks) will handle this automatically

user1019144 Over a year ago

Exactly what I was looking for. Thanks John

John S Over a year ago

@naomik - It may seem unnecessary, but it does what the OP wants. I think at least it is clear from the question (after it was edited) that the OP is aware of the alternatives.

Mulan Over a year ago

@JohnS, fair enough. If you edit the answer to acknowledge this, I can remove my downvote ^.^

John S Over a year ago

@naomik - I have added a note to my answer.

maček · Accepted Answer · 2014-02-07 03:09:23Z

1

Use fruit[] as the input name

<input type="checkbox" name="fruit[]" value="1">
<input type="checkbox" name="fruit[]" value="2">
<input type="checkbox" name="fruit[]" value="3">
<input type="checkbox" name="fruit[]" value="4">
<input type="checkbox" name="fruit[]" value="5">

You will get the following:

echo "<pre>", print_r($_GET["fruit"], true);

Output

Array
(
    [0] => 1
    [1] => 2
    [2] => 3
    [3] => 4
    [4] => 5
)

answered Feb 7, 2014 at 3:09

maček

78k37 gold badges172 silver badges200 bronze badges

Comments

Krish R · Accepted Answer · 2014-02-07 03:51:34Z

0

Try this, Use checkbox name as fruit[]. In php get the fruit array and converted as string using implode()

    <?php
       echo $fruits = implode(",",$_GET['fruit']); //1,2,3,4,5
    ?>
    <form>
    <input type="checkbox" name="fruit[]" value="1">
    <input type="checkbox" name="fruit[]" value="2">
    <input type="checkbox" name="fruit[]" value="3">
    <input type="checkbox" name="fruit[]" value="4">
    <input type="checkbox" name="fruit[]" value="5">        
    <input type="submit">
   </form>

answered Feb 7, 2014 at 3:51

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

Collectives™ on Stack Overflow

comma seperated checkbox $_GET query request with jquery

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related