Get form checkbox values and pass them through pagination?
I need to get values from some highlighted checkboxes and pass those values through pagination to php / mysql. If on another page the user selects other checkboxes, I need to add their values to the array I selected earlier.
I need this for a product comparison page. In short, I need:
- get checkbox values
- keep them
- include checkbox values from other pages in the pagination
- and when the user selects "compare" submit this array to compare the page.
Does anyone know how to do this? Will relevant examples be appreciated?
There are different ways to maintain state across different pages, including cookies, session variables, hidden inputs, passing them in a request, persisting a database, etc. In this case, I would probably use a session variable.
For more information on PHP session see PHP Sessions .
a source to share
One solution would be to load all pages at once into their own div
inside the form. When you click on a new page link, hide everything div
except the ones you need to show. This way, all checkboxes are presented in the same form, which simplifies server-side processing. This, of course, depends on how heavy each individual page is and how many pages there are.
Another solution would be to store the session variable, keep track of what was clicked. Each time someone clicks to go to a different page. POST to the server a list of checkboxes.
a source to share
You can do this using javascript to store the checkbox selection in a cookie. Here's some sample code to help you move in the right direction.
var aa_checkbox;
function init_checkbox(){
//setup blank cb cookie
if(!Cookie.read('cb')){
Cookie.write('cb', JSON.encode({}));
}
//setup "associative array" to match what is currently in the cookie
aa_checkbox = JSON.decode(Cookie.read('cb'));
//set up each checkbox with class="remember_cb"
$$('input.remember_cb').each(function(el){
//mark checked if it is in the cookie
if(aa_checkbox[el.name]){
el.checked = 'checked'
}
//setup onclick event to put checkbox status in the
el.addEvent('click', function(){
if(el.checked){
aa_checkbox[el.name] = 1;
}else{
delete(aa_checkbox[el.name]);
}
})
})
//save aa_checkbox back into cookie upon leaving a page
window.onbeforeunload = function(){Cookie.write('cb', JSON.encode(aa_checkbox));};
setup_form();
return true;
}
function setup_form(){
//set up form so that it adds the inputs upon submit.
$$('form.remember_cb_form').each(function(form){
form.addEvent('submit', function(ev){
//clean up previously inserted inputs
var aa_hidden_insert = $$('input.hidden_insert');
$each(aa_hidden_insert, function(el){
el.parentNode.removeChild(el);
})
var el_form = this;
//insert hidden elements representing the values stored in aa_checkbox
$each(aa_checkbox, function(i_value, s_name){
if(i_value){
var el_input = document.createElement('input');
el_input.type = 'hidden';
el_input.value = i_value;
el_input.name = s_name;
el_input.setAttribute('class', 'hidden_insert');
el_form.appendChild(el_input);
}
});
});
});
}
window.addEvent('domready', init_checkbox);
There is a working demo here and a more detailed explanation here
a source to share