WebReview.com: January 14, 2002: PHP Interaction with Javascript Windows
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.
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.
