I have a form with two textboxes and a submit button. The second box autocompletes the input. On submit, the page refreshes and displays a table with contents of the two textboxes(using ajax).
The autocomplete array is stored in mysql. The textboxes' values are stored in a separate table in mysql.
These are the codes:
1) autotesting.html
<html>
<head>
<title>PHP using AJAX</title>
<script type=""text/javascript" src="prototype.js"></script>
<link rel="stylesheet" href="autocomplete.css" type="text/css" media="screen">
<script src="jquery.js" type="text/javascript"></script>
<script src="dimensions.js" type="text/javascript"></script>
<script src="autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
var time_variable;
function getXMLObject() //XML OBJECT
{
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+
}
catch (e2) {
xmlHttp = false // No Browser accepts the XMLHTTP Object then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers
}
return xmlHttp; // Mandatory Statement returning the ajax object created
}
var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
function ajaxFunction() {
var getdate = new Date(); //Used to prevent caching during ajax call
if(xmlhttp) {
var txtname = document.getElementById("txtname");
var searchField = document.getElementById("searchField");
xmlhttp.open("POST","autotesting2.php",true); //calling testing2.php using POST method
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("txtname="+ txtname + "&searchField=" + searchField); //Posting to PHP File
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element
}
else {
alert("Error during AJAX call. Please try again");
}
}
}
$(function(){
setAutoComplete("searchField", "results", "autocomplete.php?part=");
});
</script>
</script>
<body>
<form name="myForm">
<table>
<tr>
<td>Add New Item Type</td>
<td>
<p id="auto">
<label>Colors: </label><br>
<input type="text" id="txtname" name="txtname" /><br><br>
<input id="searchField" name="searchField" type="text" /><br><br>
</p>
</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Add new item" onclick="ajaxFunction();" />
</tr>
</table>
<div id="message" name="message"></div>
</form>
</body>
</head>
</html>
2) autotesting2.php
<?php
$conn = mysql_connect("localhost","demo","demo");
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$txtname = $_POST["txtname"];
$searchField = $_POST["searchField"];
$sql = "INSERT INTO test3 (txtname,searchField) VALUES ('$txtname','$searchField')";
mysql_select_db('test_db');
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
die('Could not enter data: ' . mysql_error());
}
echo "<table border='2' cellspacing='5' cellpadding='5'>";
$result=mysql_query("SELECT * FROM test3");
while($row=mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['txtname'] . "</td>";
echo "<td>" . $row['searchField'] . "</td>";
echo "</tr>";
}
echo "</table>";echo "<br>";
mysql_close($conn);
?>
3) autocomplete.php
<?php
$link = mysql_connect('localhost', 'demo', 'demo');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
if (!mysql_select_db("test_db")) {
echo "Unable to select test_db: " . mysql_error();
exit;
}
$result = mysql_query("SELECT name FROM sks_color");
while ($row = mysql_fetch_assoc($result)) {
$colors[]=$row['name'];
}
mysql_free_result($result);
mysql_close($link);
// check the parameter
if(isset($_GET['part']) and $_GET['part'] != '')
{
// initialize the results array
$results = array();
// search colors
foreach($colors as $color)
{
// if it starts with 'part' add to results
if( strpos($color, $_GET['part']) === 0 ){
$results[] = $color;
}
}
// return the array as json with PHP 5.2
echo json_encode($results);
}
The code is working fine until the page refreshes and table contains cells with [object HTMLInputEle] instead of content of textboxes. also, the table in database gets inserted with [object HTMLInputEle].
What is the problem ? Please help.
