www.webdeveloper.com
Results 1 to 7 of 7

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

  1. #1
    Join Date
    Mar 2009
    Posts
    6

    Pass a PHP varialble to Javascript to dynamically fill textboxes?

    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?

  2. #2
    Join Date
    Feb 2009
    Posts
    162
    Hello

    Repost your HTML and also the Customer Tabl SQL

    Nokia to build laptops in near future

  3. #3
    Join Date
    Mar 2009
    Posts
    6
    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` (
      `
    idint(11NOT NULL auto_increment,
      `
    namevarchar(30NOT NULL,
      `
    addressvarchar(50NOT NULL,
      `
    cityvarchar(30NOT NULL,
      `
    state_idtinyint(4NOT NULL,
      `
    zipvarchar(5NOT NULL,
      
    PRIMARY KEY  (`id`)
    ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=;

    --
    -- 
    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!

  4. #4
    Join Date
    Mar 2009
    Posts
    6
    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>
    ?>

  5. #5
    Join Date
    Feb 2009
    Posts
    162
    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

  6. #6
    Join Date
    Mar 2009
    Posts
    6
    Quote Originally Posted by zahidraf View Post
    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.
    Last edited by chuckcastle; 03-06-2009 at 11:22 AM. Reason: type-o

  7. #7
    Join Date
    Feb 2009
    Posts
    162
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles