Home

Javascript and PHP Interaction

Javascript and PHP Interaction

The difference between Javascript and PHP

Javascript is a client side language, meaning that it is processed by the browser not the server. PHP is a server side language, that is processed by the server and the result of the process is displayed by the browser. A typical page that includes both lnaguages will be processed in this order - a browser sends a request for a document to the server, the server will send the document to the PHP parser to process the PHP code, then sends the document to the browser which then processes the Javascript.

The PHP script is executed by the server (server-side) before the client browser receives it. The Javascript is executed by the browser (client-side) after the server sends the document. However it is possible to combine the two languages.

Let us revisit the random link generator. The script randomly gets a link from a links table in a database, then prints an HTML link to it. Suppose we wanted to print more than one link and place them into a drop down select list that will open the links in a new window.

The first part of our new script will be the Javascript to open the new window, then the HTML form that will contain the links. PHP is used to get the appropriate links from the database and print the options for the select list in the form.

PHP + HTML Code:

<?php
 
$db = mysql_connect("server", "username", "password");
mysql_select_db("database",$db) or die ("Unable to connect to database");
//Rember to enter the name of your server, your username, your password and the name of the database you are connecting to.
 
// Seed random number generator.
srand((double)microtime()*1000000);
$query= mysql_query("SELECT * FROM links where 1=1");
// Get number of rows returned.
$rows_found = mysql_num_rows($query);
 
if($rows_found > 0) {
 
?>
 
<script language="JavaScript">
<!--
 
function gotosite(site){
 
if (site != ""){
 
myWindow=window.open(site,"newWindow","menubar=1,toolbar=1,scrollbar=1,resizable=1, width=800, height=600");
myWindow.focus();
 
}
 
}
 
// -->
</script>
 
<form class="list">
<select name="gotosites" size="1" onchange="gotosite(this.options[this.selectedIndex].value)">
<option selected>Select and Go!</option>
<?php
//get n number of random records
$max_num = "10";
for ($i=1; $i<=$max_num; $i++){
 
// Generate a random number up to the number of records returned
$rand_row = rand(1, $rows_found);
 
// Seek to randomly chosen record and get it's contents.
mysql_data_seek($query, $rand_row - 1);
$row = mysql_fetch_array($query);
 
// Do stuff with randomly chosen row here...
 
$link_name=$row["name"];
$url=$row["url"];
$id=$row["id"];
 
// Make sure that the same ramdom link is not printed more than once
if (($id != $done[1]) AND
($id != $done[2]) AND
($id != $done[3]) AND
($id != $done[4]) AND
($id != $done[5]) AND
($id != $done[6]) AND
($id != $done[7]) AND
($id != $done[8]) AND
($id != $done[9]) AND
($id != $done[10])) {
 
// Print a random link
printf("<option value=\"%s\">%s</option>",$url,$link_name);
}
 
}
 
?>
</select>
</form>
 
<?
}
?>

See it in action. ¦ Get complete code.

[pagebreak]

Another example

This example demonstrates using PHP to pass information to Javascript. Get information about the links from the database then pass those values to another page/popup window. PHP created the HREF links that will trigger the Javascript function to open the popup window.

PHP + HTML Code:

<html>
<head>
<script language="JavaScript">
<!--
var writeWin = null;
 
//open a new window and do something with the variables
 
function writeLeft(my_link,linkid) {
writeWin = window. open('','nWin','top=50,left=200,width=250,height=200');
 
var ePen = '<html><head><title>Further Info</title></head>';
ePen += '<body text="#666666" bgcolor="#ffffff">Link ID: ' + linkid;
ePen += '<br>Link: ' + my_link +'</body></html>';
var wd = writeWin.document;
 
wd.open();
wd.write(ePen);
wd.close();
}
 
function blowOut() {
if (writeWin != null && writeWin.open) writeWin.close();
}
window.onfocus=blowOut;
// -->
 
</script>
</head>
 
<body>
 
<?php
$db = mysql_connect("server", "username", "password");
mysql_select_db("database",$db) or die ("Unable to connect to database");
//Rember to enter the name of your server, your username, your password and the name of the database you are connecting to.
 
// Seed random number generator.
srand((double)microtime()*1000000);
$query= mysql_query("SELECT * FROM links where 1=1");
// Get number of rows returned.
$rows_found = mysql_num_rows($query);
 
//get n number of random records
$max_num = "10";
for ($i=1; $i<=$max_num; $i++){
 
// Generate a random number up to the number of records returned
$rand_row = rand(1, $rows_found);
 
// Seek to randomly chosen record and get it's contents.
mysql_data_seek($query, $rand_row - 1);
$row = mysql_fetch_array($query);
 
// Do stuff with randomly chosen row here...
 
$link_name=$row["name"];
$url=$row["url"];
$id=$row["id"];
$alt=$row["alt"];
 
if (($id != $done[1]) AND
($id != $done[2]) AND
($id != $done[3]) AND
($id != $done[4]) AND
($id != $done[5]) AND
($id != $done[6]) AND
($id != $done[7]) AND
($id != $done[8]) AND
($id != $done[9]) AND
($id != $done[10])) {
 
//create links that will trigger Javascript function
 
$display_block .= "<font color=\"#FF9900\">•</font>
<a href=# onMouseOver=\"writeLeft('$link_name','$id')\">$link_name</a>
Url: $url<br>
ALT: $alt<br><br>
";
$done[$i] = $id;
}
 
}
 
}
 
?>
 
<? echo "$display_block"; ?>
 
</body>
</html>

See it in action. ¦ Get complete code.

Relevant Content

Similar Content