Home arrow PHP arrow Page 2 - PHP and JavaScript, Pooling Your Resources (continued)

Separating the Logic - PHP

In this article, you will learn how to combine PHP and JavaScript to create two SELECT menus, one containing categories, and the other containing only those options applicable to the category selected.

  1. PHP and JavaScript, Pooling Your Resources (continued)
  2. Separating the Logic
  3. What Does PHP Do?
  4. Main Layout
  5. Is it PHP? Or Javascript?
By: Brian Vaughn
Rating: starstarstarstarstar / 22
September 27, 2005

print this article



Although more complex in nature than our previous application, this example will still be relatively simple. However it is good practice to separate the various elements of our project so that the logic and the display do not get unnecessarily mixed together. To help keep things separate, we will create the following files:

index.php        This is our main display file, containing mostly HTML.

functions.php    A helper file, used to retrieve SQL information.

external.php     PHP file used to generate external Javascript code.

javascript.js    Javascript helper file, contains misc. JS functions.

stylesheet.css   Stylesheet for our document, controls visual layout.

Again, many of these files could be combined, but by separating them we are making our code easier to maintain and expand later. Let’s take a closer look now at each of the files.

What About the Javascript?

Our Javascript file, ‘javascript.js’, contains five basic functions. The first will look familiar, but we made a couple of subtle changes that may warrant explanation:

// call to external Javascript/PHP file and pass Parent ID
function update_child( p_parent_option ) {     

      // create new script element and set its relative URL
(including ID argument)
      script = document.createElement( 'script' );
      script.src = 'external.php?parent_id=' +

      // attach (load) script element to document head
      document.getElementsByTagName( 'head' )[0].appendChild( script );

As you can see from its commenting, the ‘update_child’ function receives an OPTION tag as a parameter (more specifically, the OPTION tag that has just been selected by the user). It then creates a new script element as before, and attaches it to the document’s <head>. One difference in this updated version is that it also passes a URL argument along to the external JavaScript file: the currently selected OPTION’s value, (which is in this case the primary key for our ‘parent_menu’ SQL record).

The other four functions are also pretty simple, but can be very useful in terms of user interface design. As you will see shortly, our basic HTML file contains a <pre> element with the ID ‘hint_box’. This box is set to display “Ready…” by default, but will be updated when our ‘parent’ menu’s onChange event is fired. This is done in order to display helpful information to the user about our ‘parent’ SELECT menu and the information it contains. The functions we’ve written to do this are as follows:

// update hint box value
function display_hint( p_hint_text ) {
            document.getElementById( 'hint_box' ).innerHTML =
 '<strong>Status</strong>: ' + p_hint_text;

// clear interval (if one has been set) & update hint box value
using helper function
function reset_hint() {
            window.clearInterval( document.getElementById
( 'hint_box' ).interval );
            display_hint( 'Ready...' );

// clear interval (if one has been set) & update hint box value
using helper function
function show_hint( p_hint_text ) {
            window.clearInterval( document.getElementById
( 'hint_box' ).interval );
            display_hint( p_hint_text );

// set new interval
function set_timeout() {
            document.getElementById( 'hint_box' ).interval =
window.setInterval( 'reset_hint()', 2000 );

Each function is relatively simple, and probably self-explanatory with the help of the inline commenting. However, let’s take a brief look at each to make sure there is no confusion.

The ‘display_hint’ function receives as a parameter a simple string of text. It then appends to that string the text “Status: ”, and updates our ‘hint box’ to display the resulting string. This function acts as a helper for ‘reset_hint’ and ‘show_hint’, which we will now look at.

The ‘reset_hint’ function does two things. First it clears any interval that may be set for our ‘hint box’, then it updates the status text to show “Ready” using our helper function, ‘display_hint’.

The ‘show_hint’ function acts in much the same way as the ‘reset_hint’ function does. First it clears any pre-existing interval, then it updates the ‘hint box’ display value using our helper function, ‘display_hint’. The only exception is that ‘show_hint’ displays the text it receives as a parameter, instead of displaying a default value.

Lastly, the ‘set_timeout’ function simply creates an interval, and attaches it to our ‘hint box’. This interval then waits for approximately two seconds to elapse before calling the ‘reset_hint’ function to clear any rollover text and return to the default “Ready” message.

>>> More PHP Articles          >>> More By Brian Vaughn

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates


Dev Shed Tutorial Topics: