building a query string with jquery and checkboxes

Question

Hi

I'm building a search form with several filter options on the results page.

It's a basic search form, results show in an friendly url such as: domain.com/resuts/country/age/type/

The filters are simply checkboxes which on click, should reload the page with a query string to identify what has been checked/unchecked. (there is no submit, preferably the update would rebuild the query string with every check box click).

So, for example, on click of some checkboxes we'd build a query string on the end, eg:domain.com/resuts/england/20-29/female/?scene=hipster&status=single

Can anybody point me to a jquery resource or a code snippet which may assist in getting this done?

Many thanks,

Iain.

Answer 1

The jQuery.get function will automatically handle creating and building the query string when you pass a key-value pair:

http://docs.jquery.com/Ajax/jQuery.get

You can use this selector for checked checkboxes:

$('input:checkbox:checked')

Answer 2

If your html looks like

<input type="checkbox" name="scene" value="hipster" />

I guess you can use something like

var tmp = [];
$('input:checkbox:checked').each(function(){
    tmp.push($(this).attr('name') + '=' + $(this).val());
});
var filters = tmp.join('&');

Answer 3

Is this what your looking for? When you click the checkboxes it shows the selected values up top. when you submit the form it shows you the same value in an alert

<div id="buffer" style="height:2em; border:1px solid black; margin-bottom:1em"></div>

form action="#" method="get"> input type="checkbox" id="j" name="state" value="state">state
input type="checkbox" name="city" value="city">city
input type="checkbox" name="type" value="type">type
input type="submit" value="click me"> /form>

    $().ready(function(){
//just a simple demo, you could filter the page by the value of the checkbox    
$('form input:checkbox').bind('click',function(){
    if($(this).attr('checked')==false){
        //remove it from the query string
        var pieces=$('#buffer').text().split('/');

        var $this_val=$(this).val();
        for(var i=0;i<pieces.length-1;i++){
            //console.log($(this).val());
            //console.log(pieces[i]);
            if(pieces[i]==$this_val){
                //remove value from the buffer
                pieces.splice(i);
            }

            $('#buffer').text(pieces.join('/')+'/');
        }
    }else{
        //add the value to the query string
        $('#buffer').append($(this).val()+'/');
    }
}); 

    //on form submit
$('#filterWrapper form').submit(function(){
    var queryString='';
    $.each($('form input:checkbox:checked'),function(){
        queryString+=$(this).val()+'/';
    });
    alert('this will get send over: '+queryString);
    return false;//remove this in production
}); 

Sorry about the broken HTML, the editor doesnt like form tags and input tags