 |
Submit Your Code | |
 |
SEO Monitor | |
 |
UpTime Monitor | |
 |
PHP Code Contest | |
 |
My Favorite Examples | |
|
My Favorite Articles | |
 |
Update Your Profile | |
|
|
| More Weber Sites | ||
| PHP Code Search | ||
| Web Development Forums | ||
| Learn MySQL Playing Trivia | ||
| PHPBB2 Templates | ||
| Web Development Index | ||
| PHP Web Logs (BLogs) | ||
| Web Development Resources | ||
| Web Development Content | ||
| Recommended Links | ||
| PHPClasses | ||
| PHP Editor | ||
| PHP Jobs | ||
| Vision.To Design | ||
| Ajax Tutorials | ||
| PHP Programming Help | ||
| PHP/MySQL Programming | ||
| Webmaster Resources | ||
| Webmaster Forum | ||
| XML meta language | ||
| website builder | ||
| Recommended | ||
| Submit Site | ||
| Forex Trading Online forex trading platform | ||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Code | |||||
PHP Interaction with Javascript windows by Alan Gruskoff, Performant Systems alang@performantsystems.com December 2001 I want it all and I want both ways. I want the power of PHP doing database things and working stong on the server side as a real programming language. I also want the beauty of working 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 for, then have a popup window be 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, the coding is a little tricky. First, make sure you 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 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" is executes the onChange() Javascript, no submit button is needed. This lets the user type stuff, hit <Enter> and away we go. We are then going to pass 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. 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 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 being automatically selected. See the "selected" key word in the <option>s. When the user then clicks on the "Select Customer" button, Javascript does the onClick="passCustID(this.form) function, 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 user goes merrily on their way with the Customer ID set for them. The value set for Customer_ID can then be used to pass to subsequent PHP form processing. 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, have a nice day. | |||||
| Related Code Examples | |||||
