I want it all, and I want it both ways. I want the power of PHP to work with databases as well as the power of a real programming language for server-side flexibility. I also want the beauty of Javascript to make windows and user interfaces for me. Not satisfied with the standard "Fill out a form and submit it" methods that are typical in PHP development (I envisioned some windows that would popup—do good stuff—pass back the results and go away).
I wanted a user to type in a text box a word to search a database of Customers, then have a popup window instantly presented with a list box of dynamically built options to choose from. That user selection would then pass back the value of the Customer ID to the original page, then go away. This makes the user interface easy and obvious, while the coding a little tricky.
First, make sure you let Apache httpd.conf know that it should process PHP commands built into .html pages. The below directive tells Apache it should process PHP commands for both .php and .html files.
<IfModule mod_php4.c> AddType application/x-httpd-php .php .html AddType application/x-httpd-php-source .phps </IfModule>
Now, we can "shell out" to PHP code within an .html document.
Our base page in Listing 1 (below) is somewhat simple, it just contains the searchfor text box and another text box to receive the value of the resulting user selection of a Customer ID—from another window. When the browser notices a change in the value of the text box "searchfor", it executes the onChange() Javascript—no submit button is needed. This lets the user enter text, hit <Enter>, and away we go. We then pass to the next page the value of what the user typed as tacked onto the pages' name. See how the variable "address" is built.
Javascript will next open a new window for that address value. The important point here is that Javascript makes a connection to the parent-child windows that lets us set or get values in any window we choose. The new window is a "sub" window that has a two-way connection to the original. Notice the naming convention Javascript uses to point to parts of the documents.
Listing 1
test_subwindow1.html code
<html>
<head>
<script language="Javascript">
function selectWindow() {
var address
address = "customerselect.html?searchfor=" +
document.searchcust.searchfor.value
window.open(address,"","HEIGHT=400,WIDTH=600")
}
</script>
</head>
<body>
Customer Selection
<form name="searchcust">
<p>Search For <input type="text" NAME="searchfor" value=""
onChange="selectWindow()">
<p>
<p>Customer ID <input type="text" NAME="CustomerID" value="">
</form>
</body>
</html>
Now it gets interesting. We start a page with PHP commands, Listing 2 (below),
to dynamically build the string $optionlist which the page will use as HTML code. We know what the value of $searchfor is: Use it's value to your best advantage with whatever database methods you like. Those methods are well documented outside the scope of this tutorial. The example shows dummied-up example data representing a Customer ID and name.
Notice that we tell the user in the <TITLE> what they are looking at by including the value of $searchfor.
As a proof of concept, I had this page popup an alert box to confirm the data has been passed when it loads; see onLoad(). Certainly, this alert box is optional.
The user now sees a nice looking selection list box with the first item automatically selected. See the "selected" key word in the <option>s. When the user clicks on the "Select Customer" button, Javascript does the function
onClick="passCustID(this.form)"
which "posts" the value of the user's selection directly into the value of Customer_ID in the original window. Then it goes away. The value set for Customer_ID can then be used to pass to subsequent PHP form processing.
Listing 2
customerselect.html code
<?php
// Knowing the value of $searchfor which was added to the URL
"?searchfor=whatever"
// we can do php database stuff here to dynamically
// build the string $optionlist which the page will use as HTML
code
//
// (Insert database statements here)
//
$optionlist = '<option value="111" selected> Customer 111 </option>
';
$optionlist .= '<option value="222"> Customer 222 </option> ';
$optionlist .= '<option value="333"> Customer 333 </option> ';
?>
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1">
<title>Searching For <?php echo ($searchfor); ?>
Results</title>
<script language="JavaScript">
function showsearch() {
var alertmsg
alertmsg = "We are searching for <?php echo
($searchfor);?>"
alert(alertmsg)
}
function passCustID(form) {
var CustID = form.selectID.value
opener.document.searchcust.CustomerID.value = CustID
window.close()
}
</script>
</head>
<body onLoad="showsearch()">
<H1>Contacts Selection<p></H1>
<form name="searchlist" method="POST" action="">
<select name="selectID" size="20">
<?php echo ($optionlist); ?>
</select><p>
<input type="button" value="Select Customer" onClick
="passCustID(this.form)">
</form>
</body>
</html>
The really great thing this does is make real inter-window communication possible. You will see the Customer ID magically appear from our selection without the form-submit processing.
This is a good thing.
This tutorial is being made freely available in the spirit of Open Source by Alan Gruskoff, Performant Systems.