Dynamic SELECT Menus - PHP

Our search form is almost completed, with one exception: the dynamic SELECT menus do not yet work. As you may have noticed, our “Categories” menu specified an additional HTML attribute. This attribute called our JavaScript function, “attach_file”, whenever its onChange event was triggered.

onChange="attach_file(  'helper.php?category_id=' +
    this.options[ this.selectedIndex ].value );"

Another way of stating the above code would be to say that each time a “Categories” option is selected, the “helper.php” file is called and as a parameter, it receives the ID value of the category selected. In order to complete our search form then, we will need to complete the “helper.php” file by providing the following code:

<?php
      # set appropriate content type - to tell the browser we're
returning Javascript
      header( 'Content-Type: text/javascript' );     

      # include all additional files
      include_once 'inc.core.php';     

      # retrieve Category ID from URL
      $category_id      = mysql_escape_string( $_GET
['category_id'] );     

      # update child select menus
      update_child_select(    'Sub Categories', $category_id );
      update_child_select(    'Manufacturers',  $category_id );     

      # helper function to automate child menu update
      function update_child_select( $p_search_field_name,
$p_db_key_val ) {
            $f_search_array   = $GLOBALS['search_array']
[ $p_search_field_name ];
     

?>
            // set quick reference to child menu object
            var child_menu_obj      = document.getElementById( '<?php echo str_replace( ' ', '_', $p_search_field_name ); ?
>' );     

            // erase all current (child) SELECT menu options
            while ( 0 < child_menu_obj.options.length )
                  child_menu_obj.remove( 0 );                 

            // add empty "Any" option to menu
            var option_obj = new Option( 'Any', '' );
            child_menu_obj.options[ 0 ] = option_obj;
<?php     

            # if a category has been specified
            if ( !empty( $p_db_key_val ) ) {           

                  # run SQL query to return all child menu options
                  $db_query   = str_replace( '<<field>>',
$p_db_key_val, $f_search_array['populate_query'] );
                  $db_result  = mysql_query( $db_query );                 

                  # outout a SELECT menu option for each row
returned
                  if ( $db_result ) {
                        while ( $l_db_row = mysql_fetch_assoc
( $db_result ) ) {
                       

                              # show all retrieved (child) SELECT
menu options
                              $l_child_value          = $l_db_row
['value'];
                              $l_child_display  = $l_db_row
['display'];                             

                              # add new option to child menu
?>
                              var option_obj = new Option( '<?php
echo $l_child_display; ?>', '<?php echo $l_child_value; ?>' );
                              var option_rank =
child_menu_obj.options.length;
                              child_menu_obj.options
[ option_rank ] = option_obj;
<?

                        } # END while results
                  } # END if category
            } # END if results     

      } # END update_child_select()
?>

As you may have noticed, the above code is a mix of PHP and JavaScript. This is because our PHP file is being attached to the document as a JavaScript file. It is therefore capable of executing not only PHP code but JavaScript as well. This is a very important concept, as it will allow us to not only retrieve a list of appropriate values from our SQL database, but also dynamically update the search form’s SELECT menus with those values.

All our file does, in a nutshell, is retrieve the Category ID from the URL, run a query to retrieve all “Sub Category” and “Manufacturer” records found belonging to that ID, and then update the SELECT menus to contain those new values. This is made a little cleaner through the use of our helper function, “update_child_select”, but should still be relatively self-explanatory. Additional information on this technique may be found in my recent two-part article posted on Dev Articles entitled “PHP and JavaScript -- Pooling Resources”.

Note: As before, we remove any spaces present in the field name before retrieving the HTML element object.

In Summary

At this point, our page layout has been set up using HTML and CSS, our code flow has been defined, and our helper Search class has been initiated. Our application now has all of the logic necessary to intelligently create a search form for users to input their search criteria. What’s more, this logic is all easily reusable and requires little more than updating the logic found within our “inc.conf.php” (and possibly the “helper.php”) files.

This is a good start, as we have now laid the ground-work for part three of this article, which will cover retrieving a list of result records and sorting those records by each field specified. The real meat of the application lies there, but it is important to first establish an easily extensible interface with which users may conduct searches. So far we are right on track.

If you would like to see a working example of this application, you may do so here: http://portfolio.boynamedbri.com/devshed/search/part_2/. If you would like to download source code for this application, you may access that here: http://images.devshed.com/ds/stories/Creating_Searchable_Inventory_System/
part_2.zip