Append parameters to a URL based on checkboxes - php

Question

So I have a list of 8 checkboxes in a form. These checkboxes are supposed to control a link that will load in a frame. However I have no idea where to start...
Checkbox1(appendThis1) - checked
Checkbox2(appendThis2)
Checkbox3(appendThis3) - checked
Checkbox4(appendThis4)
Checkbox5(appendThis5) - checked
Checkbox6(appendThis6)
Checkbox7(appendThis7)
Checkbox8(appendThis8)
So based on this I would have a base URL such as http://www.google.com and since checkbox1,3, and 5 are check the appendThis1, appendThis2, appendThis3 would be added to the end of the url but none of the other checkboxes would append anything to the URL. Each checkbox would add or remove its specific parameter to the URL.
Also whenever a checkbox is check it will reload the URL.

Answer 1

The way I would go at this, is as follows
make sure in your html form, all the checboxes have the same name with empty square braces at the end, this way you will get an array back in php. As the value you should set the string you want to append to your html. something like this:
<input type="checkbox" value="q=something" name="myCheckboxes[]" /> option 1
<input type="checkbox" value="lang=en" name="myCheckboxes[]" /> option 2
...
in your php code, just implode te array you get back trough the post, and append it to your html. (see more info here http://www.html-form-guide.com/php-form/php-form-checkbox.html). The pseudo-code would look like this:
$url = 'http://www.google.com?';
$checkboxes = $_POST['myCheckboxes'];
$url .= implode('&', $checkboxes);
for the automatic submit when a checkbox is checked, you will need some client side script. My choice would be jQuery and it would look like this:
$('#myForm input[type="checkbox"]').change(function() {
$('#myForm').submit();
};
Note that none of the code is tested, but it should work fine, or at least point you in the right direction. Corrections are welcome of course!

Answer 2

Example with raw Javascript. You can work out loading your iframe with the resulting URL.
jsFiddle
<script language='javascript'>
arr_sel = new Array();
function constructURL(cv)
{
if (arr_sel.length==0)
{
arr_sel.push(cv);
} else {
if (inArray(cv, arr_sel))
{
key = getKey(cv, arr_sel);
arr_sel.splice(key,1);
} else {
arr_sel.push(cv);
}
}
makeURL(arr_sel);
}
function inArray(val, arr)
{
var length = arr.length;
for(var i = 0; i < length; i++) {
if(arr[i] == val) return true;
}
return false;
}
function getKey(val, arr)
{
for (var i = 0; i < arr.length; i++)
{
if (arr[i]==val)
return i
}
}
function makeURL(arr_sel)
{
opts = new String;
arr_opts = new Array();
for (var i = 0; i < arr_sel.length; i++)
{
arr_opts.push(arr_sel[i]);
}
url = 'http://google.com?' + arr_opts.join('&');
document.getElementById('myurl').innerHTML = url;
}
</script>
<input type=checkbox name=whatever value='opt1=foo' onClick="constructURL(this.value)"> foo <br>
<input type=checkbox name=whatever value='opt2=bar' onClick="constructURL(this.value)"> bar <br>
<div id='myurl'>http://google.com?</div>