comma seperated checkbox $_GET query request with jquery - php

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)

Answer 1

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

Answer 2

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
)

Answer 3

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>