Pass a PHP varialble to Javascript to dynamically fill textboxes?

**chuckcastle** · 03-05-2009 06:02 PM

Some information:
1. I have a database with a "customers" table
2. I'm using AJAX to "suggest" (a la Google) a name being entered in a textbox
3. If a match is found, and the name is clicked, the data should automatically be entered in the remaining textboxes (currently it's only working for the name field)

Here's what I have:

HTML Code:

<table id="txtHint" cellpadding="0" cellspacing="0"></table>

<h1>Add new Work Order</h1>
<form name="addwo" action="<?php echo $SCRIPT_NAME ?>" method="post">

<table>
	<tr>
		<td>Name</td>
		<td><input type="text" name="txtClient" onkeyup="showHint(this.value)" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>Address</td>
		<td><input type="text" name="address" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>

And the javascript:

Code:

var xmlHttp

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").style.visibility="visible";
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function closeMe()
{
document.getElementById('txtHint').style.visibility='hidden';
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

And the PHP:

PHP Code:


<?php



require("config.php");



$db = mysql_connect($dbhost, $dbuser, $dbpassword);

mysql_select_db($dbdatabase, $db);



header("Cache-Control: no-cache, must-revalidate");

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");



$q = $_GET["q"];

$sql = "SELECT * FROM customers WHERE name LIKE '".$q."%' ORDER BY name ASC LIMIT 10;";

$res = mysql_query($sql);

$row = mysql_num_rows($res);



if($row == 0) {

    echo "<tr><td>No matches</td></tr>";

} else {

    while($a = mysql_fetch_array($res)) {

        echo "<tr class='normal' onMouseOver=\"this.className='highlight'\" onMouseOut=\"this.className='normal'\" onClick='addwo.txtClient.value=\"".$a['name']."\";closeMe();'><td>".$a['name']."</td></tr>";

    }

}

    echo "<tr><td class='close'><span onClick='closeMe();'>close</span></td></tr>";

?>

The HTML above is obviously not the whole file but I hope it's enough to give you a good picture of what the rest of the form may look like. I'd like to be able to pass the $a['address'] string from the PHP into the HTML file and set it as the value of the "address" textbox but am quickly finding that it's not very easy to do.

Suggestions?

**zahidraf** · 03-05-2009 10:10 PM

Hello

Repost your HTML and also the Customer Tabl SQL

Nokia to build laptops in near future

**chuckcastle** · 03-05-2009 11:10 PM

Hi zahidraf, thanks for the reply.

addwo.php in its entirety:

HTML Code:

<?php
$page = basename($_SERVER['PHP_SELF'], '.php');
session_start();

require("config.php");

if(isset($_SESSION['USERNAME']) == FALSE) {
	header("Location: ".$config_basedir);
}

$db = mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($dbdatabase, $db);

if($_POST['submit']) {
	$sql = "INSERT INTO workorder(stat_id, dateposted, controlnum, clientname, address, city, state, zip, phone1, phone2, email, ref_id, serialnum, tech_id, loc_id, equip_id, issue, lastupdate, updatedby, takenby) VALUES(".$_POST['stat_id'].", NOW(), '".$_POST['controlnum']."', '".$_POST['txtClient']."', '".$_POST['address']."', '".$_POST['city']."', '".$_POST['state']."', '".$_POST['zip']."', '".$_POST['phone1']."', '".$_POST['phone2']."', '".$_POST['email']."', '".$_POST['referral']."', '".$_POST['serialnum']."', '".$_POST['tech']."', '".$_POST['location']."', '".$_POST['equip']."', '".$_POST['issue']."', NOW(), '".$_SESSION['USERNAME']."', '".$_SESSION['USERNAME']."');";
	mysql_query($sql);
	header("Location: ".$config_basedir);
}
else {
	require("header.php");
?>

<table id="txtHint" cellpadding="0" cellspacing="0"></table>

<h1>Add new Work Order</h1>
<form name="addwo" action="<?php echo $SCRIPT_NAME ?>" method="post">

<table>
	<tr>
		<td>Control Number</td>
		<td><input type="text" name="controlnum"  onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" value="<?php $numsql = "SELECT * FROM workorder ORDER BY controlnum DESC LIMIT 1;";$numres = mysql_query($numsql);$numrows = mysql_num_rows($numres);if($numrows == 0) {echo "";}else {while($nextnum = mysql_fetch_assoc($numres)) {$controlnum = $nextnum['controlnum'] + 1;echo $controlnum;}} ?>" /></td>
	</tr>
	<tr>
		<td>Name</td>
		<td><input type="text" name="txtClient" onkeyup="showHint(this.value)" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /><img class="no-border" src="clientdetails.png" /></td>
	</tr>
	<tr>
		<td>Address</td>
		<td><input type="text" name="address" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>City</td>
		<td><input type="text" name="city" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>State</td>
		<td><input type="text" name="state" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>Zip Code</td>
		<td><input type="text" name="zip" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>Primary Telephone Number</td>
		<td><input type="text" name="phone1" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>Secondary Telephone Number</td>
		<td><input type="text" name="phone2" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>Email Address</td>
		<td><input type="text" name="email" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>Referral</td>
		<td><select name="referral" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'">
			<?php
				$refsql = "SELECT * FROM referral;";
				$refres = mysql_query($refsql);
				while($refrow = mysql_fetch_assoc($refres)) {
					echo "<option value='".$refrow['id']."'>".$refrow['ref']."</option>";
				}
			?>
			</select>
		</td>
	</tr>
	<tr>
		<td>Equipment</td>
		<td><select name="equip" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'">
			<?php
				$equipsql = "SELECT * FROM equip;";
				$equipres = mysql_query($equipsql);
				while($equiprow = mysql_fetch_assoc($equipres)) {
					echo "<option value='".$equiprow['id']."'>".$equiprow['type']."</option>";
				}
			?>
			</select>
		</td>
	</tr>
	<tr>
		<td>Serial Number</td>
		<td><input type="text" name="serialnum" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>Assigned Technician</td>
		<td>
			<select name="tech" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'">
			<?php
				$techsql = "SELECT * FROM logins;";
				$techres = mysql_query($techsql);
				while($techrow = mysql_fetch_assoc($techres)) {
					echo "<option value='".$techrow['id']."'>".$techrow['username']."</option>";
				}
			?>
			</select>
		</td>
	</tr>
	<tr>
		<td>Issue</td>
		<td><textarea name="issue" rows="10" cols="50" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'"></textarea></td>
	</tr>
	<tr>
		<td>Repair Location</td>
		<td><select name="location" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'">
			<?php
				$locsql = "SELECT * FROM repairloc;";
				$locres = mysql_query($locsql);
				while($locrow = mysql_fetch_assoc($locres)) {
					echo "<option value='".$locrow['id']."'>".$locrow['location']."</option>";
				}
			?>
			</select>
		</td>
	<tr>
		<td>Status</td>
		<td>
			<select name="stat_id" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'">
			<?php
				$statsql = "SELECT * FROM status;";
				$statres = mysql_query($statsql);
				while($statrow = mysql_fetch_assoc($statres)) {
					echo "<option value='".$statrow['id']."'>".$statrow['stat']."</option>";
				}
			?>
			</select>
		</td>
	</tr>
	<tr>
		<td></td>
		<td><input class="button" type="submit" name="submit" value="Add Work Order"></td>
	</tr>
</table>
</form>

<?php
}
require("footer.php");
?>

And a the customers table (edited to not show 2900+ records):

PHP Code:


CREATE TABLE IF NOT EXISTS `customers` (

  `id` int(11) NOT NULL auto_increment,

  `name` varchar(30) NOT NULL,

  `address` varchar(50) NOT NULL,

  `city` varchar(30) NOT NULL,

  `state_id` tinyint(4) NOT NULL,

  `zip` varchar(5) NOT NULL,

  PRIMARY KEY  (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;



--

-- Dumping data for table `customers`

--



INSERT INTO `customers` (`id`, `name`, `address`, `city`, `state_id`, `zip`) VALUES

(1, 'CHUCK CASTLE', '123 SOME ST', 'ANYTOWN', 5, '12345')

Thanks again for the help!

**chuckcastle** · 03-06-2009 12:43 AM

Not sure if this helps any but here's my header.php file (edited to show only relevant code):

PHP Code:


<?php



session_start();



require("config.php");

$db = mysql_connect($dbhost, $dbuser, $dbpassword);

mysql_select_db($dbdatabase, $db);



switch($page)

{

    case "addwo":

        $title = 'Work Order Manager - Add Work Order';

        $addwo_id = ' id="current"';

        $onload = ' onload="javascript:document.addwo.txtClient.focus();"';

        $scripts = '<script src="clienthint.js"></script>';

        break;

}



echo <<<HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title>$title</title>

    <link rel="stylesheet" href="stylesheet.css" type="text/css" />

    $scripts

</head>

<body $onload>

?>

**zahidraf** · 03-06-2009 03:55 AM

I checked there are simple two optin to do this .

1) When you are sending data back send data this way

id=test|name=name|

then split data with |
and then get values of id name etc

seconldy .
Make A div and return this div with all value

Technology News

**chuckcastle** · 03-06-2009 10:21 AM

Originally Posted by zahidraf

1) When you are sending data back send data this way

id=test|name=name|

then split data with |
and then get values of id name etc

Not sure I'm quite understanding what you mean here. You mean spitting everything back to the AJAX via URL?

Code:

name=".$a['name']."|address=".$a['address']."| ...

?

Make A div and return this div with all value

So... something like:

HTML Code:

<div id="info">
<input type="textbox" value="<?= $_GET=['name'] ?>" />
<input type="textbox" value="<?= $_GET=['address'] ?>">
</div>

And so on? If that's the case, wouldn't the values continue to change dynamically as the hint table populates?

I'll work on it in about an hour when I get in to the office.

**zahidraf** · 03-08-2009 11:18 PM

Yes it wil work as well and that is quite simple just replace the compelte div with the updated div with all values .

Safari 4 beta launch by Apple

Thread: Pass a PHP varialble to Javascript to dynamically fill textboxes?

Thread Tools

Display

Pass a PHP varialble to Javascript to dynamically fill textboxes?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions