Using Javascript to set a field value in a form

Kaji · 06-30-2009, 01:45 PM

Ok, I'm pretty confident in my PHP skills these days, but I've kind of hit the wall on what I can do with PHP alone, so I'm branching into a bit of Javascript to see what I can do to fill in the cracks.

As some of you may have seen in my previous thread in this forum, I'm trying to create a field in a couple of my forms where I can let the user type in the name of a language, and it'll guide them to what I want the input to be. Deciding that got a bit too complex, I decided to harness my site's database and let the user type in their language naturally, and then go from there. I found a tutorial that explained basic Javascript and AJAX to do something similar to what I want, but it writes the output to a SPAN tag instead of a field. I've tried tinkering around with the script running it all, but nothing seems to redirect the output without breaking everything else. Can anyone offer any insight into this?

The code consists of 3 files, as follows:

langlisttest.php

Code:

<?php
	include("functions.php");
	dbconnect();	
	include("bars.php");
	echo "<div id='container'>";

?>
<html>
<head>
<script src="js/clienthint.js"></script>
</head>
<body>

<form>
Name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
Code: <input type="text" id="txt2" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

clienthint.js

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 XMLHTTP!");
  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").innerHTML=xmlhttp.responseText;
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

gethint.php

Code:

<?php
	include("functions.php");
	dbconnect();	

// Fill up array with names
$sql	= "SELECT * FROM `iso639-3` WHERE `code3`='".strtoupper($q)."' OR `code1`='".strtoupper($q)."'"; // 639-3 code
$result	= mysql_query($sql);
$count	= mysql_num_rows($result);

switch ($count) {
	case "1":
		$data	= mysql_fetch_assoc($result);
		if (!$data[officialname]) {
			$data[officialname] = $data[name];
		}
		$a[0]	= $data[code3];
		break;
	default:
		$sql	= "SELECT * FROM `iso639-3` WHERE `name`='$q'"; // Basic name
		$result	= mysql_query($sql);
		$recount	= mysql_num_rows($result);
//		echo "Recount: $recount<br>";
//		echo $sql."<br>";
		
		switch ($recount) {
			case "1":
				$data	= mysql_fetch_assoc($result);
				if (!$data[officialname]) {
					$data[officialname] = $data[name];
				}
				$a[0]	= $data[code3];
				break;
			default:
				$sql	= "SELECT * FROM `iso639-3` WHERE `officialname`='$q'"; // Display name
				$result	= mysql_query($sql);
				$recount2	= mysql_num_rows($result);
//				echo "Recount: $recount2<br>";
//				echo $sql."<br>";
				
				if ($recount2 == 1) {
					$data	= mysql_fetch_assoc($result);
					if (!$data[officialname]) {
						$data[officialname] = $data[name];
					}
					$a[0]	= $data[code3];
				} else if ($recount2 > 1) {
					$a[0]	= "MUL";
				}
		}
}

//output the response
echo $a[0];
?>

I'm certain the problem is in the Javascript file, as I've completely rewritten gethint.php from what the tutorial had for it and made it give me the correct result. It just won't direct that output to the second field I added to the form.

Thanks again!