 PHP Page 4 - PHP and JavaScript, Pooling Your Resources (continued) |
Main Layout - PHPIn 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.
print this article SEARCH DEV SHED |
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> <br><br> <SELECT name="child" id="child" onChange=""> </body> 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.
blog comments powered by Disqus |
/ 22 
PHP and JavaScript Interaction: Storing Data in the Client, part 1
