Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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</p> <pre><code>&lt;div id="buffer" style="height:2em; border:1px solid black; margin-bottom:1em"&gt;&lt;/div&gt; </code></pre> form action="#" method="get"> input type="checkbox" id="j" name="state" value="state">state<br> input type="checkbox" name="city" value="city">city<br> input type="checkbox" name="type" value="type">type<br> input type="submit" value="click me"> /form> <pre><code> $().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&lt;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 }); </code></pre> <p>Sorry about the broken HTML, the editor doesnt like form tags and input tags</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload