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

Main Layout - 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.

TABLE OF CONTENTS:
  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
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

We’ve saved the ‘index.php’ file to nearly the end because it simply pieces together all of the individual elements of our application. Those elements, which we have already covered, each handle various aspects of our program – but aren’t really useful on their own. Once they’re put together in the proper order though, the pieces start to fall into place. Let’s take a look at how that’s done:

<HTML>
<head>
      <title>PHP & Javascript - Example</title>
      <link rel="stylesheet" type="text/css"
href="stylesheet.css" />
      <SCRIPT type="text/javascript"
src="javascript.js"></SCRIPT>
</head>    
<body onLoad="reset_hint()">

<pre id="hint_box"></pre><br>

<SELECT name="parent" id="parent" onChange="show_hint
( 'Retrieving list values...' ); update_child( this.options
[ this.selectedIndex ] );">
<?
      include_once 'functions.php';
      echo get_parent_menu();
?>
</SELECT>

<br><br>

<SELECT name="child" id="child" onChange="">
</SELECT>

</body>
</HTML>

Again, this is nothing too complex. We began by cleaning up the source from our previous example. This was done by moving both the CSS and JavaScript code into their own, dedicated files. We have also removed the ‘anchor’ tag in favor of two SELECT tags: ‘parent’ and ‘child’. The names of these SELECT menus are indicative of their purposes. The ‘parent’ menu contains a simple list of categories while the ‘child’ menu contains options for the category selected. The “hint box”, which we have already mentioned, is positioned above the ‘parent’ SELECT menu in order to make it easily visible at all times.

In the code above, the ‘parent’ menu is populated with data from our ‘parent_menu’ SQL table using a helper function located inside ‘functions.php’. We’ve already reviewed that function, but one thing we did not mention was the menu’s onChange event handler. Our ‘parent’ SELECT menu has two JavaScript event handlers assigned to the onChange event. This means that each time we select a different menu option, the Javascript functions ‘show_hint’ and ‘update_child’ will execute. We’ve already looked at both of those functions, but by way of review ‘show_hint’ will temporarily display a helpful message to the user (via the “hint box”) and ‘update_child’ will load our external PHP/Javascript file (complete with URL arguments).

We’re now ready to take a look at that external file.



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- 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: