changing the results of a search when a checkbox is checked

Hi I've a search page which allows users to search through a table of charities. Each charity has one or more tags attached to it. As a search alternative I'd like a list of the tags (there are o开发者_StackOverflow社区nly 20 or so) with a checkbox for each where if someone checks one or more boxes then only the charities with those tags appear in the list.

So I've made the list and been advised that I should use 'observerform' call on the page that runs whenever the form is changed'

I've googled observerform but haven't been able to figure out what exactly to do since I'm totally new to javascript. I'm using cakephp which uses prototype by the way

Can anyone give me a bit of a road map on how to do this? I don't get how to attach the javascript to the form and how to make it call a function to run the query

if you are wanting a 'live' update of the charities list as the user clicks the checkboxes then you will want to use ajax for this. jQuery has a great ajax library built in (even though a lot of people are against jQuery for various reasons, it is probably going to be your easiest bet).

your checkboxes:

<input type='checkbox' value='tag1'> Tag1
<input type='checkbox' value='tag2'> Tag2
<input type='checkbox' value='tag3'> Tag3

jquery

$(document).ready(function(){

   $('input').click(function(){
       var SearchString = "";
       $('input').each(function(){
          if( $(this).is(':checked') )
              SearchString = SearchString + " AND tagField = " + $(this).val();
       });
       $.ajax({url: 'urlToYourPHPscript.php',
               data: {SearchVal: SearchString},
               success: function(data){
                            //update your html with returned query results in 'data'
                         };
       });
   });

php

   //receive the SearchVal Post value send from ajax
   //escape your string to prevent sql injection 
   $lcSearchVal = mysql_real_escape_string( $_POST['SearchVal'] );
   //query your charities table where you have an active charity and
   //searchVal is found in your tags field
   $qry = mysql_query("SELECT * FROM CharitiesTable WHERE Active " . $lcSearchVal)
                        or die("query failed : " . mysql_error() );

   //create an empty array to dump your query results into
   $returnArray = array();
   while( $row = mysql_fetch_array( $qry ) ){
        //dump query results to a usable array to transfer back to jquery
        $returnArray[] = $row;
   }

   return array( "results" => $returnArray );

now back in your jquery ajax success function you can reference your query data via data.results and if you want to loop through each returned record just put this in your success function:

if( data.results.length > 0 ){
 for(var i=0; i<data.results.length;i++){
    $('some html div to show results').append(
         oData.results[i]['field1'] + oData.results[i]['field2'] + //etc...
    );
  }
 }