PHP and JavaScript, Pooling Your Resources (continued) - Main Layout
(Page 4 of 5 )
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.
Next: Is it PHP? Or Javascript? >>
More PHP Articles
More By Brian Vaughn
/ 19 
