Sending Multiple Checkbox Options

October 27, 2023 Post a Comment

I'm creating a used cars website (written in PHP), and I'm stuck on sending advanced search options from form. I have more than 30 of them and I wonder if it's possible, and how, t

Solution 1:

You can send them in an array.

<form method="post">
    <inputtype="checkbox" name="param[]" value="blue" />
    <inputtype="checkbox" name="param[]" value="red" />
    <inputtype="checkbox" name="param[]" value="orange" />
    <inputtype="checkbox" name="param[]" value="green" />
    <inputtype="checkbox" name="param[]" value="black" />
    <inputtype="submit" value="Submit" />
</form>

>> $_POST['param']
array('blue', 'orange')

You can even use multidimensional arrays:

<form method="post">
    <inputtype="checkbox" name="param[color][]" value="blue" />
    <inputtype="checkbox" name="param[color][]" value="red" />
    <inputtype="checkbox" name="param[color][]" value="orange" />
    <inputtype="checkbox" name="param[color][]" value="green" />
    <inputtype="checkbox" name="param[color][]" value="black" />
    <inputtype="checkbox" name="param[year][]" value="1999" />
    <inputtype="checkbox" name="param[year][]" value="2000" />
    <inputtype="checkbox" name="param[year][]" value="2001" />
    <inputtype="checkbox" name="param[year][]" value="2002" />
    <inputtype="checkbox" name="param[year][]" value="2003" />
    <inputtype="submit" value="Submit" />
</form>

>> $_POST['param']['color']
array('blue', 'green')

>> $_POST['param']['year']
array('2001', '2004')

Solution 2:

Place them in an array and loop through them in the script that processes the form.

<formaction="yourscript.php"method="POST"><labelfor="option1">Option 1</label><inputid="option1"type="checkbox"name="option[]"value="option1" /><labelfor="option2">Option 2</label><inputid="option2"type="checkbox"name="option[]"value="option2" /><labelfor="option3">Option 3</label><inputid="option3"type="checkbox"name="option[]"value="option3" /><inputtype="submit"name="submit"value=Submit /></form>

The key is to place your checkbox values into in an array. option[]

Then in your script, you can access the array and loop through the submitted options.

if(!empty($_POST['submit']) //process the formif(!empty($_POST['option']) //check to see if any checkboxes were selected
     {
          $options = $_POST['option'];
          foreach($optionsas$option) //loop through the checkboxes
          {
               //do what you need to do with an option
          }
     }

}

Solution 3:

Ok guys thank you all for your answers. I've come up with a solution using jQuery. I've gathered all values from those checkboxes in array, and assign this array to one hidden field. All of these options are outside from form and they're not submited.

javascript:

$('.options').click(function() {
var selectedItems = newArray();
$("input:checkbox[name='opt[]']:checked").each(function() {selectedItems.push($(this).val());});
var data = selectedItems.join('|');
$("#opts").val(data);
});

and the form:

<form name="search" method="get" action="blabla.php">
.....
<input type="hidden" name="options"id="opts" value=""/>
....
</form>

and outside the form goes all options available

...
<inputtype="checkbox" name="opt[]"class="options" value="1"/>
<inputtype="checkbox" name="opt[]"class="options" value="2"/>
<inputtype="checkbox" name="opt[]"class="options" value="3"/>
...

Solution 4:

You can write a script that iterates through all your fields (i.e. check boxes), collects the information into a hidden field, in the exact form you've presented (1,3,5 would mean 1 3 and 5 are checked, 2 and 4 are unchecked).

Turning it into a bit representation, would make it more complex to construct and de-construct. For example, in the former example, you can send the number 10101 == 17 to represent a location (i.e. locations 1 3 5 are "on", 2 and 4 are off). Again, not that easy, and not recommended. [You could also send a binary representation, in which case you'd send send 1000 == 8 == 1 + 3 + 5 ---- even more complex]

Solution 5:

GET requests will generate long, complicated URLs with that many options with the default behavior.

POST requests can leave you with short URLs, but can behave badly with the "back" button and aren't bookmark friendly.

To generate short URLs with a GET, you would either need an intermediary script that translated the selected options to something more compact, or you would need to observe the selected options using JavaScript and create the compact URL client-side.

Bitwise math would mean assigning each bit or group of bits in a single variable to a given option and predefined set of values. For example a 32 bit integer could represent 8 attributes of 4 bits each:

01010010010001001010101010101001

Or:

0101 0010 0100 0100 1010 1010 1010 1001#8   #7   #6   #5   #4   #3   #2   #1

So one integer could represent eight attributes, with 16 possible values per 4 bit group. Obviously that requires elaboration, but I'm sure someone on SO has already asked that question and I'm not up for typing any more right now. :)

JavaScript Square