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

Attachments
<?php

/**
 * Project:     Securimage: A PHP class for creating and managing form CAPTCHA images<br />
 * File:        securimage.php<br />
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or any later version.<br /><br />
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.<br /><br />
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA<br /><br />
 *
 * Any modifications to the library should be indicated clearly in the source code
 * to inform users that the changes are not a part of the original software.<br /><br />
 *
 * If you found this script useful, please take a quick moment to rate it.<br />
 * http://www.hotscripts.com/rate/49400.html  Thanks.
 *
 * @link http://www.phpcaptcha.org Securimage PHP CAPTCHA
 * @link http://www.phpcaptcha.org/latest.zip Download Latest Version
 * @link http://www.phpcaptcha.org/Securimage_Docs/ Online Documentation
 * @copyright 2007 Drew Phillips
 * @author drew010 <drew@drew-phillips.com>
 * @version 1.0.3.1 (March 24, 2008)
 * @package Securimage
 *
 */

/**
  ChangeLog

  1.0.3.1
  - Error reading from wordlist in some cases caused words to be cut off 1 letter short

  1.0.3
  - Removed shadow_text from code which could cause an undefined property error due to removal from previous version

  1.0.2
  - Audible CAPTCHA Code wav files
  - Create codes from a word list instead of random strings

  1.0
  - Added the ability to use a selected character set, rather than a-z0-9 only.
  - Added the multi-color text option to use different colors for each letter.
  - Switched to automatic session handling instead of using files for code storage
  - Added GD Font support if ttf support is not available.  Can use internal GD fonts or load new ones.
  - Added the ability to set line thickness
  - Added option for drawing arced lines over letters
  - Added ability to choose image type for output

*/

/**
 * Output images in JPEG format
 */
define('SI_IMAGE_JPEG', 1);
/**
 * Output images in PNG format
 */
define('SI_IMAGE_PNG',  2);
/**
 * Output images in GIF format
 * Must have GD >= 2.0.28!
 */
define('SI_IMAGE_GIF',  3);

/**
 * Securimage CAPTCHA Class.
 *
 * @package    Securimage
 * @subpackage classes
 *
 */
class Securimage {

  /**
   * The desired width of the CAPTCHA image.
   *
   * @var int
   */
  var $image_width = 175;

  /**
   * The desired width of the CAPTCHA image.
   *
   * @var int
   */
  var $image_height = 45;

  /**
   * The image format for output.<br />
   * Valid options: SI_IMAGE_PNG, SI_IMAGE_JPG, SI_IMAGE_GIF
   *
   * @var int
   */
  var $image_type = SI_IMAGE_PNG;

  /**
   * The length of the code to generate.
   *
   * @var int
   */
  var $code_length = 4;

  /**
   * The character set for individual characters in the image.<br />
   * Letters are converted to uppercase.<br />
   * The font must support the letters or there may be problematic substitutions.
   *
   * @var string
   */
  var $charset = 'ABCDEFGHKLMNPRSTUVWYZ23456789';
  //var $charset = '0123456789';

  /**
   * Create codes using this word list
   *
   * @var string  The path to the word list to use for creating CAPTCHA codes
   */
  var $wordlist_file = '../words/words.txt';

  /**
   * True to use a word list file instead of a random code
   *
   * @var bool
   */
  var $use_wordlist  = true;

  /**
   * Whether to use a GD font instead of a TTF font.<br />
   * TTF offers more support and options, but use this if your PHP doesn't support TTF.<br />
   *
   * @var boolean
   */
  var $use_gd_font = false;

  /**
   * The GD font to use.<br />
   * Internal gd fonts can be loaded by their number.<br />
   * Alternatively, a file path can be given and the font will be loaded from file.
   *
   * @var mixed
   */
  var $gd_font_file = 'gdfonts/bubblebath.gdf';

  /**
   * The approximate size of the font in pixels.<br />
   * This does not control the size of the font because that is determined by the GD font itself.<br />
   * This is used to aid the calculations of positioning used by this class.<br />
   *
   * @var int
   */
  var $gd_font_size = 20;

  // Note: These font options below do not apply if you set $use_gd_font to true with the exception of $text_color

  /**
   * The path to the TTF font file to load.
   *
   * @var string
   */
  var $ttf_file = "./elephant.ttf";

  /**
   * The font size.<br />
   * Depending on your version of GD, this should be specified as the pixel size (GD1) or point size (GD2)<br />
   *
   * @var int
   */
  var $font_size = 24;

  /**
   * The minimum angle in degrees, with 0 degrees being left-to-right reading text.<br />
   * Higher values represent a counter-clockwise rotation.<br />
   * For example, a value of 90 would result in bottom-to-top reading text.
   *
   * @var int
   */
  var $text_angle_minimum = -20;

  /**
   * The minimum angle in degrees, with 0 degrees being left-to-right reading text.<br />
   * Higher values represent a counter-clockwise rotation.<br />
   * For example, a value of 90 would result in bottom-to-top reading text.
   *
   * @var int
   */
  var $text_angle_maximum = 20;

  /**
   * The X-Position on the image where letter drawing will begin.<br />
   * This value is in pixels from the left side of the image.
   *
   * @var int
   */
  var $text_x_start = 8;

  /**
   * Letters can be spaced apart at random distances.<br />
   * This is the minimum distance between two letters.<br />
   * This should be <i>at least</i> as wide as a font character.<br />
   * Small values can cause letters to be drawn over eachother.<br />
   *
   * @var int
   */
  var $text_minimum_distance = 30;

  /**
   * Letters can be spaced apart at random distances.<br />
   * This is the maximum distance between two letters.<br />
   * This should be <i>at least</i> as wide as a font character.<br />
   * Small values can cause letters to be drawn over eachother.<br />
   *
   * @var int
   */
  var $text_maximum_distance = 33;

  /**
   * The background color for the image.<br />
   * This should be specified in HTML hex format.<br />
   * Make sure to include the preceding # sign!
   *
   * @var string
   */
  var $image_bg_color = "#e3daed";

  /**
   * The text color to use for drawing characters.<br />
   * This value is ignored if $use_multi_text is set to true.<br />
   * Make sure this contrasts well with the background color.<br />
   * Specify the color in HTML hex format with preceding # sign
   *
   * @see Securimage::$use_multi_text
   * @var string
   */
  var $text_color = "#ff0000";

  /**
   * Set to true to use multiple colors for each character.
   *
   * @see Securimage::$multi_text_color
   * @var boolean
   */
  var $use_multi_text = true;

  /**
   * String of HTML hex colors to use.<br />
   * Separate each possible color with commas.<br />
   * Be sure to precede each value with the # sign.
   *
   * @var string
   */
  var $multi_text_color = "#0a68dd,#f65c47,#8d32fd";

  /**
   * Set to true to make the characters appear transparent.
   *
   * @see Securimage::$text_transparency_percentage
   * @var boolean
   */
  var $use_transparent_text = true;

  /**
   * The percentage of transparency, 0 to 100.<br />
   * A value of 0 is completely opaque, 100 is completely transparent (invisble)
   *
   * @see Securimage::$use_transparent_text
   * @var int
   */
  var $text_transparency_percentage = 15;


  // Line options
  /**
   * Draw vertical and horizontal lines on the image.
   *
   * @see Securimage::$line_color
   * @see Securimage::$line_distance
   * @see Securimage::$line_thickness
   * @see Securimage::$draw_lines_over_text
   * @var boolean
   */
  var $draw_lines = true;

  /**
   * The color of the lines drawn on the image.<br />
   * Use HTML hex format with preceding # sign.
   *
   * @see Securimage::$draw_lines
   * @var string
   */
  var $line_color = "#80BFFF";

  /**
   * How far apart to space the lines from eachother in pixels.
   *
   * @see Securimage::$draw_lines
   * @var int
   */
  var $line_distance = 5;

  /**
   * How thick to draw the lines in pixels.<br />
   * 1-3 is ideal depending on distance
   *
   * @see Securimage::$draw_lines
   * @see Securimage::$line_distance
   * @var int
   */
  var $line_thickness = 1;

  /**
   * Set to true to draw angled lines on the image in addition to the horizontal and vertical lines.
   *
   * @see Securimage::$draw_lines
   * @var boolean
   */
  var $draw_angled_lines = false;

  /**
   * Draw the lines over the text.<br />
   * If fales lines will be drawn before putting the text on the image.<br />
   * This can make the image hard for humans to read depending on the line thickness and distance.
   *
   * @var boolean
   */
  var $draw_lines_over_text = false;

  /**
   * For added security, it is a good idea to draw arced lines over the letters to make it harder for bots to segment the letters.<br />
   * Two arced lines will be drawn over the text on each side of the image.<br />
   * This is currently expirimental and may be off in certain configurations.
   *
   * @var boolean
   */
  var $arc_linethrough = true;

  /**
   * The colors or color of the arced lines.<br />
   * Use HTML hex notation with preceding # sign, and separate each value with a comma.<br />
   * This should be similar to your font color for single color images.
   *
   * @var string
   */
  var $arc_line_colors = "#8080ff";

  /**
   * Full path to the WAV files to use to make the audio files, include trailing /.<br />
   * Name Files  [A-Z0-9].wav
   *
   * @since 1.0.1
   * @var string
   */
  var $audio_path = './audio/';


  //END USER CONFIGURATION
  //There should be no need to edit below unless you really know what you are doing.

  /**

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.

This article has been dead for over six months. Start a new discussion instead.