i want to display alert on the basis of responce text in AJAX, meaning to say i am getting responce text in id "responce " through php file by AJAX method, when responce is incorrect it shows alert before form submission the code is as follow,

<?php  session_start(); ?>

<script type="text/javascript">
var xmlHttp
function checkCAP(str) {
	if (str=="") {
	alert("plase enter the code");
	return
}

xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
	alert ("Browser does not support HTTP Request")
	return
}
var url="test.php"
    url=url+"?id="+str
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged(){
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{
	document.getElementById("responce").innerHTML=xmlHttp.responseText
 	}
}

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;
}
</script>

<?php
if (!empty($_GET['id'])) { 
	include("securimage.php");
	$img = new Securimage();
	$valid = $img->check($_GET['id']);
	
	if($valid == true) {
    $responce = "correct";
  	} else {
    $responce = "incorrect";
  }
echo $responce;
} else { //form is posted
?>	
	<html>
	<head>
	  <title>Securimage Test Form</title>
	</head>
	<body>
	<form method="POST">
	<!-- pass a session id to the query string of the script to prevent ie caching -->
	<img src="securimage_show.php?sid=<?php echo md5(uniqid(time())); ?>"><br />
	<input type="text" name="code" onblur= "checkCAP(this.value);"/><br />
	<input type="submit" value="Submit Form" />
	</form>
  <div id ="responce">Responce will be dispaly here</div>
<?php
}
?>
</body>
</html>

however the script is running very much fine.
i have used may methods to but in vain..
please help somebody how to do it, or any alternative way...
thanks in advance...

Servis,

I have made a number of changes here but haven't tried running the code, therefore please treat with caution.

Assuming securimage_show.php and Securimage() to be compatible (presumably they communicate with each other via $Session and then control access to other pages), then I think my code stands a chance of working.

The main features are:

  1. exit; after validating to guarantee no output is served other than the validation code (0 or 1).
  2. Validation is initiated on form submit. checkCAP() initially returns false under all conditions to prevent form submission.
  3. stateChanged() looks at the validation result and (apart from displaying a message), on success sets the global variable validated to true, then stimulates a second submission of the form.
  4. With validated to true, the second submission is guaranteed successful ( see first line of checkCAP() ).
  5. By setting the form action, you can cause any other page to be displayed after successful validation. Presumably some code on other pages tests to see if the captcha has been successfully undertaken.

That's about it I think.

I would be amazed if it works without some further debugging but the overall shape looks about right now.

<?php
session_start();
if (!empty($_GET['id'])) {
	include("securimage.php");
	$img = new Securimage();
	$valid = $img->check($_GET['id']);
	if($valid == true) { echo '1'; }
	else { echo '0'; }
	exit;
}
?>	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Securimage Test Form</title>
<script type="text/javascript">
var xmlHttp, validated = false;
function checkCAP(str) {
	if (validated) { return true; }
	if (str == "") {
		alert("Please enter the code");
		return false;
	}
	xmlHttp = GetXmlHttpObject()
	if (xmlHttp == null) {
		alert ("Browser does not support HTTP Request");
		return false;
	}
	var url = "test.php?id=" + str;
	xmlHttp.onreadystatechange = stateChanged;
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
	return false;
}
function stateChanged(){
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
		if(xmlHttp.responseText == '1') {
			document.getElementById("response").innerHTML = 'Correct';
			validated = true;
			document.forms[0].submit();
		}
		else {
			document.getElementById("responce").innerHTML = 'Incorrect';
		}
	}
}
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;
}
</script>
</head>
<body>
<form method="POST" action="" onsubmit="return checkCAP(this.code);">
<!-- pass a session id to the query string of the script to prevent ie caching -->
<img src="securimage_show.php?sid=<?php echo md5(uniqid(time())); ?>"><br />
<input id="code" type="text" name="code"/><br />
<input type="submit" value="Submit Form" />
</form>
<div id ="response">Response will be dispaly here</div>
</body>
</html>

Best of luck.

Airshow

Another thought.

My code doesn't cause a different secureimage to be displayed on valdation failure. As this is a good thing, you probably need to introduce a mechanism to make it happen, and maybe your original code was correct in this respect (but was maybe also the reason you didn't see your debug messages).

Airshow

thank you very much for the valueable comments.actually i want to ask something else. i am going to start new post for it.

Cool! I'll look out for it.

Airshow