Hi all,

I have a page that modifies (using AJAX) a list of animal characteristics stored in a database. The page uses a PHP file to control the actual access to the database. Everything works except when a duplicate entry is entered. The PHP file prevents the duplicate entry from being added to the database and sends a message back to the AJAX function to alert the user. However, the AJAX function does not process the message.

I have setup an alert box to watch the onreadystatechange event and see a status code of 0 rather than the expected code of 200. I have tried setting the full domain name in the query string and using both GET and POST to no effect.

Here is the full html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Control Panel</title>

<style type="text/css">
	@import url(cp.css);
</style>

<script type="text/javascript">
function showChar()
	{
	var xmlhttp=new XMLHttpRequest();
	var url = "ctrPanelProc.php";
	var params = "selection=getCharacteristics";
	xmlhttp.open("POST", url, true);
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlhttp.setRequestHeader("Content-length", params.length);
	xmlhttp.setRequestHeader("Connection", "close");
	xmlhttp.onreadystatechange = function() 
		{//Call a function when the state changes.
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
			{
			document.getElementById("charList").innerHTML=xmlhttp.responseText;
			}
		}
	xmlhttp.send(params);
	}

function addChar()
	{
	var xmlhttp=new XMLHttpRequest();
	var characteristic = document.getElementById("txtAddChar").value;
	var url = "ctrPanelProc.php";
	var params = "selection=addCharacteristics&txtAddChar="+characteristic;
	xmlhttp.open("POST", url, true);
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlhttp.setRequestHeader("Content-length", params.length);
	xmlhttp.setRequestHeader("Connection", "close");
	xmlhttp.onreadystatechange = function() 
		{//Call a function when the state changes.
		alert("state = " + xmlhttp.readyState + " status = " + xmlhttp.status);
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
			{
			alert(xmlhttp.responseText);
			}
		}
	xmlhttp.send(params)
	}
		
function dellChar()
	{
	if(typeof(window.clickedCharID)!="undefined")
		{
		var xmlhttp=new XMLHttpRequest();
		var characteristic = window.clickedCharID;
		var url = "ctrPanelProc.php";
		var params = "selection=delCharacteristics&txtDelChar=" + characteristic;
		xmlhttp.open("POST", url, true);
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlhttp.setRequestHeader("Content-length", params.length);
		xmlhttp.setRequestHeader("Connection", "close");
		xmlhttp.onreadystatechange = function() 
			{//Call a function when the state changes.
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
					{
					
					}
			}
		xmlhttp.send(params)
		}
	}		
</script>

</head>
<body>
<div id="wrapper">
	<div class="grpWrapper">
	<h2>Animal Characteristics</h2>
		<script type="text/javascript">
			showChar();
		</script>
	
		<div class="addCharGrp">
			<form id="frmAddChar" name="frmAddChar" method="get" action="" onsubmit="addChar();">
				<h3>Add A Characteristic</h3>
				<p>&nbsp;</p>
				<p>
				  <input name="txtAddChar" type="text" id="txtAddChar" size="30" maxlength="250" />
				</p>
				<p>&nbsp;  </p>
				<input type="submit" name="Submit" value="Submit" />
				<input type="hidden" name="selection"  value="addCharacteristics"/>
			</form>
		</div>
		
		<div class="delCharGrp">
			<h3>Delete Selected Characteristic</h3>
			<p>&nbsp;</p>
			<form id="frmDelChar" name="frmDelChar" method="get" action="" onsubmit="dellChar();">
				<input type="submit" name="Submit" value="Submit" />
			</form>
		</div>	
		<div id="charList" class="listCharGrp"></div>	
		<script type="text/javascript">
		document.getElementById("txtAddChar").focus();
		</script>
	</div> <!--End grpWrapper-->

</div> <!--End wrapper-->
</body>
</html>

Here is the PHP file:

<?php
// ctrPanelProc.php

// Create the database connection
$link = mysql_connect('mySecretSite.com', 'user', 'password');
mysql_select_db("dbName");

// Filter the input
$selection = $_POST['selection'];
if ($selection != "getCharacteristics" and
	$selection != "addCharacteristics" and
	$selection != "delCharacteristics")
	{ 
	exit();
	}

if ($_POST['txtAddChar'] != "")
	{	
	$txtAddChar = $_POST['txtAddChar'];
	if ( preg_match("/^[0-9]+:[X-Z]+$/D", $txtAddChar))
		{ 
		exit();
		}
	}

if ($_POST['txtDelChar'] != "")
	{	
	$txtDelChar = $_POST['txtDelChar'];
	if ( !is_numeric ($txtDelChar))
		{ 
		exit();
		}
	}
$cleanSelection = $selection;
$cleanTxtAddChar = $txtAddChar;
$cleanTxtDelChar = $txtDelChar;
// Inputs are now clean	

// Process the selection
switch ($cleanSelection)
	{ 
	case 'getCharacteristics':
		echo "<form id='frmShowChar' name='frmDelChar' action='' onsubmit='dellChar();'>";
		$sql = "SELECT * FROM characteristic ORDER BY characteristic, characteristicID  ASC";
		$result = mysql_query($sql);
		while($row = mysql_fetch_array($result))
			  {
			  echo "<input onclick='window.clickedCharID=this.value' type='radio' id='charID' name='charID' value='" . 
			  $row['characteristicID'] . "'/> ID# ". $row['characteristicID'] . " " . $row['characteristic'] . "<br />" ;
			  }
		echo "</form>";
		break;
		 
	case 'addCharacteristics':
		// Look for duplicate entry
		$sql = "SELECT * FROM characteristic WHERE characteristic = '$cleanTxtAddChar'";
		$result = mysql_query($sql);
		//echo "<input name='dup' type='hidden' id='dup' value='false' />";
		if ( mysql_num_rows($result) > 0 )
			{
			echo "Duplicate Entry!";
			break;
			}
		
		// Insert entry into DB
		$sql = "INSERT INTO characteristic (characteristic) VALUES ('$cleanTxtAddChar')";
		mysql_query($sql);
		break;
		
	case 'delCharacteristics':
		$sql = "DELETE FROM characteristic WHERE characteristicID = '$cleanTxtDelChar'";
		mysql_query($sql);
		break;
	} //End switch $selection
?>

I normally don't post this much code but I am at a total loss so I am hoping someone can spot what is wrong. Thanks for any help you can give me!

cmccully

cmcc,

Status of 0 is normally associated with a local file (eg. c:\\mydocuments\....) as opposed to a properly delivered web page, complete with http response headers.

Also, both onsubmit functions should return false , to suppress normal HTML form submission, otherwise the submit buttons will initiate an ajax call then cause the page to be refreshed, probably before the ajax response has arrived.

Change :

<form id="frmAddChar" name="frmAddChar" method="get" action="" onsubmit="addChar();">
...
<form id="frmDelChar" name="frmDelChar" method="get" action="" onsubmit="dellChar();">

to :

<form id="frmAddChar" name="frmAddChar" method="get" action="" onsubmit="addChar(); return false;">
...
<form id="frmDelChar" name="frmDelChar" method="get" action="" onsubmit="dellChar(); return false;">

Non a complete answer but something to try.

Airshow

Hi Airshow,


Your answer was complete enough. Adding return false; to the forms solved the problem. Thanks so much for your help!

cmccully

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.