Topic
  • 14 replies
  • Latest Post - ‏2011-07-21T12:10:04Z by Siabanie
Siabanie
Siabanie
10 Posts

Pinned topic JavaScript + AJAX + PHP = CAPTCHA

‏2011-07-15T11:06:38Z |
Hi all,

I would like to ask if anyone could help me about AJAX validation error message with CAPTCHA (secureimage) - At the moment the error message display at processForm.php, IF user entered a wrong code.

But what I would like do to is; the error message will POP UP on the same page on checkForm.php instead of the next page. I managed to show the error message if user did not fill the code field but not able to show the error message IF user entered the code incorrect.

Basically I have forms (checkForm.php, processForm.php & thankyou.php) - I have all the standard check error / validation which is in JavaScript e.g.

checkForm.php
PHP
<?php
session_start();
require("include/application_top.php");

?>
<script type="text/javascript">

$(document).ready(function(){

$('#btn_submit').click(function() {
var error_num = 0;
var error_mesg = "";

$('name=name').parent().removeClass('error');
if($('name=name').val()==""){
error_num++;
error_mesg += "Please enter your name\n";
..
..
..
$('name=name').parent().addClass('error');$('name=captcha_code').parent().removeClass('error');
if($('name=captcha_code').val()==""){
error_num++;
error_mesg += "Please enter the image verification\n";
$('name=captcha_code').parent().addClass('error');
}

if(error_num>0){
alert(error_mesg);
}else if(error_num==0){
//alert("in");
$('#present_form').submit();
//document.present_form.submit();
}
return false;

});

});
</script>

<!--And the rest are just HTML code-->
..
..
<tr>
<td width="20%">Name</td>
<td width="80%"><input name="name" type="text" id="name" size="30" /></td>
</tr>
..
..
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="20%"><input type="text" name="captcha_code" size="20" maxlength="6" />

Different Image </td>
<td width="80%">CAPTCHA Image</td>
</tr>
</table>
[/PHP]

processForm.php
PHP
<?php
session_start();
require("include/application_top.php");

include_once $_SERVER . '/securimage/securimage.php';
$securimage = new Securimage();
if ($securimage->check($_POST) == false) {
//echo "The security code entered was incorrect.

";
echo "The code you entered was incorrect. Please go back and try again. ";
exit;
}

<!--The rest of the code are just connection to DB-->
[/PHP]
Can anyone assist me on this please? Thanks in advance.
Updated on 2011-07-21T12:10:04Z at 2011-07-21T12:10:04Z by Siabanie
  • SystemAdmin
    SystemAdmin
    1140 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-15T15:50:03Z  
    One way I can think of is to use redirect to the checkForm.php page again from within the processForm.php if the verification failed. This is conditional upon the readiness of using header() function at the stage of the conditional block (ie, as long as the require() and include_once() etc... have not yet outputted anything to the client...)
    
    
    
    if (!$securimage->check($_POST)) 
    { header(
    'Location: checkForm.php?retry=yes'); 
    }
    


    And then, in the checkForm.php, you start by checking query string "retry" ($_GET) is set or not; and if set, whether it is "yes". If both conditions are met, you can set some message, and put that message into some container such as a div or else appropriately positioned and styled in the page.
  • Siabanie
    Siabanie
    10 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-16T23:37:55Z  
    One way I can think of is to use redirect to the checkForm.php page again from within the processForm.php if the verification failed. This is conditional upon the readiness of using header() function at the stage of the conditional block (ie, as long as the require() and include_once() etc... have not yet outputted anything to the client...)
    <pre class="jive-pre"> if (!$securimage->check($_POST)) { header( 'Location: checkForm.php?retry=yes'); } </pre>

    And then, in the checkForm.php, you start by checking query string "retry" ($_GET) is set or not; and if set, whether it is "yes". If both conditions are met, you can set some message, and put that message into some container such as a div or else appropriately positioned and styled in the page.
    Thanks tsuji for your reply,

    But could you please be more specific about how to implement them? I am very new in programming and perhaps you could show me e.g snippets or an example how I can solve this please?

    Thanks again.
  • SystemAdmin
    SystemAdmin
    1140 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-17T16:48:25Z  
    • Siabanie
    • ‏2011-07-16T23:37:55Z
    Thanks tsuji for your reply,

    But could you please be more specific about how to implement them? I am very new in programming and perhaps you could show me e.g snippets or an example how I can solve this please?

    Thanks again.
    But could you please be more specific about how to implement them? I am very new in programming and perhaps you could show me e.g snippets or an example how I can solve this...

    This is a frightening stripped down skeleton to illustrate the mechanism. Whether you can adapt it to your situation, I cannot guarantee because what I said and am to illustrate should be considered more basic than the functionalities used in what you've shown for other purposes in the processing. Maybe what was shown is not your script after all?!

    [0] CheckForm.php
    
    <?php $err_msg=
    ''; 
    
    if (isset($_GET[
    'retry']) && $_GET[
    'retry']==
    'yes') 
    { $err_msg=
    'you were not validated, try again?'; 
    } ?> <html> <body> <form name=
    "formname" method=
    "post" action=
    "ProcessForm.php"> <input type=
    "text" name=
    "captcha_code" value=
    "captcha_valid" /><br/> <input type=
    "submit" /> </form> <div id=
    "message"> <?php 
    
    if ($err_msg!=
    '') 
    { echo $err_msg; 
    } ?> </div> </body> </html>
    

    [1] ProcessForm.php
    
    <?php $captcha=$_POST[
    'captcha_code']; 
    
    if (strtolower($captcha)==
    'captcha_valid') 
    { echo 
    'You have been validated.'; 
    } 
    
    else 
    { header(
    'Location: CheckForm.php?retry=yes'); 
    } ?>
    
  • Siabanie
    Siabanie
    10 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-17T17:46:42Z  
    But could you please be more specific about how to implement them? I am very new in programming and perhaps you could show me e.g snippets or an example how I can solve this...

    This is a frightening stripped down skeleton to illustrate the mechanism. Whether you can adapt it to your situation, I cannot guarantee because what I said and am to illustrate should be considered more basic than the functionalities used in what you've shown for other purposes in the processing. Maybe what was shown is not your script after all?!

    [0] CheckForm.php
    <pre class="jive-pre"> <?php $err_msg= ''; if (isset($_GET[ 'retry']) && $_GET[ 'retry']== 'yes') { $err_msg= 'you were not validated, try again?'; } ?> <html> <body> <form name= "formname" method= "post" action= "ProcessForm.php"> <input type= "text" name= "captcha_code" value= "captcha_valid" /><br/> <input type= "submit" /> </form> <div id= "message"> <?php if ($err_msg!= '') { echo $err_msg; } ?> </div> </body> </html> </pre>
    [1] ProcessForm.php
    <pre class="jive-pre"> <?php $captcha=$_POST[ 'captcha_code']; if (strtolower($captcha)== 'captcha_valid') { echo 'You have been validated.'; } else { header( 'Location: CheckForm.php?retry=yes'); } ?> </pre>
    Hi tsuji,

    Thanks for your feedback and thoughts, I have tried to put them together but the "error message" for CAPTCHA still not working as it should be.

    I would like an error message (pop up) show on the first page (checkForm.php) when user entered a wrong code/secureimage. At the moment the error message showing on the next page (processFrom.php).

    Here I show you the entire code:
    bold checkForm.php bold
    <?php
    session_start();
    require("include/application_top.php");

    $err_msg='';
    if (isset($_GET) && $_GET=='yes') {
    $err_msg='you were not validated, try again?';
    }

    ?>
    <head>
    <script type="text/javascript">

    $(document).ready(function(){

    $('#btn_submit').click(function() {
    var error_num = 0;
    var error_mesg = "";

    $('name=name').parent().removeClass('error');
    if($('name=name').val()==""){
    error_num++;
    error_mesg += "Please enter your name \n";
    $('name=name').parent().addClass('error');
    }

    $('name=tel').parent().removeClass('error');
    if($('name=tel').val()==""){
    error_num++;
    error_mesg += "Please enter telephone no\n";
    $('name=tel').parent().addClass('error');
    }

    $('name=captcha_code').parent().removeClass('error');
    if($('name=captcha_code').val()==""){
    error_num++;
    error_mesg += "Please enter the image verification\n";
    $('name=captcha_code').parent().addClass('error');
    }

    if(error_num>0){
    alert(error_mesg);
    }else if(error_num==0){

    $('#present_form').submit();
    }
    return false;

    });

    });
    </script>
    </head>
    <body>

    <form name="check_form" id="check_form" method="post" action="processForm.php">

    <table width="100%" border="0" cellspacing="5" cellpadding="0">
    <tr>
    <td width="20%">Name</td>
    <td width="80%"><input name="name" type="text" id="name" size="30" /></td>
    </tr>
    <tr>
    <td>Tel</td>
    <td><input name="tel" type="text" id="tel" size="30" /></td>
    </tr>

    </table>

    <dl>
    Please enter the text that you see in the image into the box on below.
    </dl>

    <table width="100%" border="0" cellspacing="5" cellpadding="0">
    <tr>
    <td width="20%"><input type="text" name="captcha_code" size="20" maxlength="6" />

    Different Image </td>
    <td width="80%">CAPTCHA Image</td>
    </tr>
    </table>

    <input name="btn_submit" type="button" id="btn_submit" value="Submit" />
    </form>
    <?php
    if ($err_msg!='') {
    echo $err_msg;
    }
    ?>
    </body>
    </html>
    
    *bold*processForm.php*bold*
    

    <?php
    session_start();
    require("include/application_top.php");

    include_once $_SERVER . '/securimage/securimage.php';
    $securimage = new Securimage();
    if ($securimage->check($_POST) == false) {
    //echo "The security code entered was incorrect.<br /><br />";
    echo "The code you entered was incorrect. Please go <a href='javascript:history.go(-1)'>back</a> and try again. ";
    exit;
    }

    $captcha=$_POST;
    if (strtolower($captcha)=='captcha_valid') {
    echo 'You have been validated.';
    } else {
    header('Location: presents_hold_c.php?retry=yes');
    }
    ..
    ..
    <!--SNIPPETS DATABASE CONNECTION-->
    $table_fields = array("name", "tel");
    ..
    ..
    $connection = mysql_connect (DB_SERVER, DB_USER, DB_PASS) or
    die ('I cannot connect to the database because: ' . mysql_error());
    mysql_select_db (DB_NAME, $connection);
    mysql_query ($query, $connection)
    or die(mysql_error()."\n<br />This is the query:\n<br />".$query);
    ..
    ..

    header ("Location:thankyou.php");

    }
    ?>
    {code}
  • Siabanie
    Siabanie
    10 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-17T17:51:08Z  
    But could you please be more specific about how to implement them? I am very new in programming and perhaps you could show me e.g snippets or an example how I can solve this...

    This is a frightening stripped down skeleton to illustrate the mechanism. Whether you can adapt it to your situation, I cannot guarantee because what I said and am to illustrate should be considered more basic than the functionalities used in what you've shown for other purposes in the processing. Maybe what was shown is not your script after all?!

    [0] CheckForm.php
    <pre class="jive-pre"> <?php $err_msg= ''; if (isset($_GET[ 'retry']) && $_GET[ 'retry']== 'yes') { $err_msg= 'you were not validated, try again?'; } ?> <html> <body> <form name= "formname" method= "post" action= "ProcessForm.php"> <input type= "text" name= "captcha_code" value= "captcha_valid" /><br/> <input type= "submit" /> </form> <div id= "message"> <?php if ($err_msg!= '') { echo $err_msg; } ?> </div> </body> </html> </pre>
    [1] ProcessForm.php
    <pre class="jive-pre"> <?php $captcha=$_POST[ 'captcha_code']; if (strtolower($captcha)== 'captcha_valid') { echo 'You have been validated.'; } else { header( 'Location: CheckForm.php?retry=yes'); } ?> </pre>
    Hi tsuji,

    Thanks for your feedback and thoughts, I have tried to put them together but the "error message" for CAPTCHA still not working as it should be.

    I would like an error message (pop up) show on the first page (checkForm.php) when user entered a wrong code/secureimage. At the moment the error message showing on the next page (processFrom.php).

    Here I show you the entire code:
    checkForm.php

    
    <?php session_start(); require(
    "include/application_top.php");   $err_msg=
    ''; 
    
    if (isset($_GET[
    'retry']) && $_GET[
    'retry']==
    'yes') 
    { $err_msg=
    'you were not validated, try again?'; 
    }   ?> <head> <script type=
    "text/javascript">   $(document).ready(function()
    {   $(
    '#btn_submit').click(function() 
    { var error_num = 0; var error_mesg = 
    ""; $(
    '[name=name]').parent().removeClass(
    'error'); 
    
    if($(
    '[name=name]').val()==
    "")
    { error_num++; error_mesg += 
    "Please enter your name \n"; $(
    '[name=name]').parent().addClass(
    'error'); 
    } $(
    '[name=tel]').parent().removeClass(
    'error'); 
    
    if($(
    '[name=tel]').val()==
    "")
    { error_num++; error_mesg += 
    "Please enter telephone no\n"; $(
    '[name=tel]').parent().addClass(
    'error'); 
    } $(
    '[name=captcha_code]').parent().removeClass(
    'error'); 
    
    if($(
    '[name=captcha_code]').val()==
    "")
    { error_num++; error_mesg += 
    "Please enter the image verification\n"; $(
    '[name=captcha_code]').parent().addClass(
    'error'); 
    } 
    
    if(error_num>0)
    { alert(error_mesg); 
    }
    
    else 
    
    if(error_num==0)
    {   $(
    '#present_form').submit(); 
    } 
    
    return 
    
    false; 
    });   
    }); </script> </head> <body>   <div id=
    "form"> <form name=
    "check_form" id=
    "check_form" method=
    "post" action=
    "processForm.php">     <div id=
    "formwhite">   <table width=
    "100%" border=
    "0" cellspacing=
    "5" cellpadding=
    "0"> <tr> <td width=
    "20%">Name</td> <td width=
    "80%"><input name=
    "name" type=
    "text" id=
    "name" size=
    "30" /></td> </tr> <tr> <td>Tel</td> <td><input name=
    "tel" type=
    "text" id=
    "tel" size=
    "30" /></td> </tr>   </table>   <dl> Please enter the text that you see in the image into the box on below. </dl>   <table width=
    "100%" border=
    "0" cellspacing=
    "5" cellpadding=
    "0"> <tr> <td width=
    "20%"><input type=
    "text" name=
    "captcha_code" size=
    "20" maxlength=
    "6" /> <a href=
    "#"> [ Different Image ]</a></td> <td width=
    "80%"><img id=
    "captcha" src=
    "/securimage/securimage_show.php" alt=
    "CAPTCHA Image"/></td> </tr> </table>       <div class=
    "btn"><input name=
    "btn_submit" type=
    "button" id=
    "btn_submit" value=
    "Submit" /></div> </div> </form> <div id=
    "message"> <?php 
    
    if ($err_msg!=
    '') 
    { echo $err_msg; 
    } ?> </div> </body> </html>
    


    processForm.php

    
    <?php session_start(); require(
    "include/application_top.php");   include_once $_SERVER[
    'DOCUMENT_ROOT'] . 
    '/securimage/securimage.php'; $securimage = 
    
    new Securimage(); 
    
    if ($securimage->check($_POST[
    'captcha_code']) == 
    
    false) 
    { 
    //echo "The security code entered was incorrect.<br /><br />"; echo 
    "The code you entered was incorrect. Please go <a href='javascript:history.go(-1)'>back</a> and try again. "; exit; 
    }   $captcha=$_POST[
    'captcha_code']; 
    
    if (strtolower($captcha)==
    'captcha_valid') 
    { echo 
    'You have been validated.'; 
    } 
    
    else 
    { header(
    'Location: presents_hold_c.php?retry=yes'); 
    } .. .. <!--SNIPPETS DATABASE CONNECTION--> $table_fields = array(
    "name", 
    "tel"); .. .. $connection = mysql_connect (DB_SERVER, DB_USER, DB_PASS) or die (
    'I cannot connect to the database because: ' . mysql_error()); mysql_select_db (DB_NAME, $connection); mysql_query ($query, $connection) or die(mysql_error().
    "\n<br />This is the query:\n<br />".$query); .. .. header (
    "Location:thankyou.php"); 
    } ?>
    
  • Siabanie
    Siabanie
    10 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-17T17:55:08Z  
    But could you please be more specific about how to implement them? I am very new in programming and perhaps you could show me e.g snippets or an example how I can solve this...

    This is a frightening stripped down skeleton to illustrate the mechanism. Whether you can adapt it to your situation, I cannot guarantee because what I said and am to illustrate should be considered more basic than the functionalities used in what you've shown for other purposes in the processing. Maybe what was shown is not your script after all?!

    [0] CheckForm.php
    <pre class="jive-pre"> <?php $err_msg= ''; if (isset($_GET[ 'retry']) && $_GET[ 'retry']== 'yes') { $err_msg= 'you were not validated, try again?'; } ?> <html> <body> <form name= "formname" method= "post" action= "ProcessForm.php"> <input type= "text" name= "captcha_code" value= "captcha_valid" /><br/> <input type= "submit" /> </form> <div id= "message"> <?php if ($err_msg!= '') { echo $err_msg; } ?> </div> </body> </html> </pre>
    [1] ProcessForm.php
    <pre class="jive-pre"> <?php $captcha=$_POST[ 'captcha_code']; if (strtolower($captcha)== 'captcha_valid') { echo 'You have been validated.'; } else { header( 'Location: CheckForm.php?retry=yes'); } ?> </pre>
    Hi tsuji,

    Thanks for your feedback and thoughts, I have tried to put them together but the "error message" for CAPTCHA still not working as it should be.

    I would like an error message (pop up) show on the first page (checkForm.php) when user entered a wrong code/secureimage. At the moment the error message showing on the next page (processFrom.php).

    Here I show you the entire code:
    checkForm.php
    
    <?php session_start(); require(
    "include/application_top.php");   $err_msg=
    ''; 
    
    if (isset($_GET) && $_GET==
    'yes') 
    { $err_msg=
    'you were not validated, try again?'; 
    }   ?> <head> <script type=
    "text/javascript">   $(document).ready(function()
    {   $(
    '#btn_submit').click(function() 
    { var error_num = 0; var error_mesg = 
    "";   $(
    'name=name').parent().removeClass(
    'error'); 
    
    if($(
    'name=name').val()==
    "")
    { error_num++; error_mesg += 
    "Please enter your name \n"; $(
    'name=name').parent().addClass(
    'error'); 
    }   $(
    'name=tel').parent().removeClass(
    'error'); 
    
    if($(
    'name=tel').val()==
    "")
    { error_num++; error_mesg += 
    "Please enter telephone no\n"; $(
    'name=tel').parent().addClass(
    'error'); 
    }   $(
    'name=captcha_code').parent().removeClass(
    'error'); 
    
    if($(
    'name=captcha_code').val()==
    "")
    { error_num++; error_mesg += 
    "Please enter the image verification\n"; $(
    'name=captcha_code').parent().addClass(
    'error'); 
    }   
    
    if(error_num>0)
    { alert(error_mesg); 
    }
    
    else 
    
    if(error_num==0)
    {   $(
    '#present_form').submit(); 
    } 
    
    return 
    
    false;   
    });   
    }); </script> </head> <body>   <form name=
    "check_form" id=
    "check_form" method=
    "post" action=
    "processForm.php">     <table width=
    "100%" border=
    "0" cellspacing=
    "5" cellpadding=
    "0"> <tr> <td width=
    "20%">Name</td> <td width=
    "80%"><input name=
    "name" type=
    "text" id=
    "name" size=
    "30" /></td> </tr> <tr> <td>Tel</td> <td><input name=
    "tel" type=
    "text" id=
    "tel" size=
    "30" /></td> </tr>   </table>   <dl> Please enter the text that you see in the image into the box on below. </dl>   <table width=
    "100%" border=
    "0" cellspacing=
    "5" cellpadding=
    "0"> <tr> <td width=
    "20%"><input type=
    "text" name=
    "captcha_code" size=
    "20" maxlength=
    "6" />   Different Image </td> <td width=
    "80%">CAPTCHA Image</td> </tr> </table>     <input name=
    "btn_submit" type=
    "button" id=
    "btn_submit" value=
    "Submit" /> </form> <?php 
    
    if ($err_msg!=
    '') 
    { echo $err_msg; 
    } ?> </body> </html>
    


    processForm.php

    
    <?php session_start(); require(
    "include/application_top.php");   include_once $_SERVER . 
    '/securimage/securimage.php'; $securimage = 
    
    new Securimage(); 
    
    if ($securimage->check($_POST) == 
    
    false) 
    { 
    //echo "The security code entered was incorrect.<br /><br />"; echo 
    "The code you entered was incorrect. Please go <a href='javascript:history.go(-1)'>back</a> and try again. "; exit; 
    }   $captcha=$_POST; 
    
    if (strtolower($captcha)==
    'captcha_valid') 
    { echo 
    'You have been validated.'; 
    } 
    
    else 
    { header(
    'Location: checkFrom.php?retry=yes'); 
    } .. .. <!--SNIPPETS DATABASE CONNECTION--> $table_fields = array(
    "name", 
    "tel"); .. .. $connection = mysql_connect (DB_SERVER, DB_USER, DB_PASS) or die (
    'I cannot connect to the database because: ' . mysql_error()); mysql_select_db (DB_NAME, $connection); mysql_query ($query, $connection) or die(mysql_error().
    "\n<br />This is the query:\n<br />".$query); .. ..   header (
    "Location:thankyou.php");   
    } ?>
    
  • Siabanie
    Siabanie
    10 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-17T18:13:50Z  
    • Siabanie
    • ‏2011-07-17T17:55:08Z
    Hi tsuji,

    Thanks for your feedback and thoughts, I have tried to put them together but the "error message" for CAPTCHA still not working as it should be.

    I would like an error message (pop up) show on the first page (checkForm.php) when user entered a wrong code/secureimage. At the moment the error message showing on the next page (processFrom.php).

    Here I show you the entire code:
    checkForm.php
    <pre class="jive-pre"> <?php session_start(); require( "include/application_top.php"); $err_msg= ''; if (isset($_GET) && $_GET== 'yes') { $err_msg= 'you were not validated, try again?'; } ?> <head> <script type= "text/javascript"> $(document).ready(function() { $( '#btn_submit').click(function() { var error_num = 0; var error_mesg = ""; $( 'name=name').parent().removeClass( 'error'); if($( 'name=name').val()== "") { error_num++; error_mesg += "Please enter your name \n"; $( 'name=name').parent().addClass( 'error'); } $( 'name=tel').parent().removeClass( 'error'); if($( 'name=tel').val()== "") { error_num++; error_mesg += "Please enter telephone no\n"; $( 'name=tel').parent().addClass( 'error'); } $( 'name=captcha_code').parent().removeClass( 'error'); if($( 'name=captcha_code').val()== "") { error_num++; error_mesg += "Please enter the image verification\n"; $( 'name=captcha_code').parent().addClass( 'error'); } if(error_num>0) { alert(error_mesg); } else if(error_num==0) { $( '#present_form').submit(); } return false; }); }); </script> </head> <body> <form name= "check_form" id= "check_form" method= "post" action= "processForm.php"> <table width= "100%" border= "0" cellspacing= "5" cellpadding= "0"> <tr> <td width= "20%">Name</td> <td width= "80%"><input name= "name" type= "text" id= "name" size= "30" /></td> </tr> <tr> <td>Tel</td> <td><input name= "tel" type= "text" id= "tel" size= "30" /></td> </tr> </table> <dl> Please enter the text that you see in the image into the box on below. </dl> <table width= "100%" border= "0" cellspacing= "5" cellpadding= "0"> <tr> <td width= "20%"><input type= "text" name= "captcha_code" size= "20" maxlength= "6" /> Different Image </td> <td width= "80%">CAPTCHA Image</td> </tr> </table> <input name= "btn_submit" type= "button" id= "btn_submit" value= "Submit" /> </form> <?php if ($err_msg!= '') { echo $err_msg; } ?> </body> </html> </pre>

    processForm.php

    <pre class="jive-pre"> <?php session_start(); require( "include/application_top.php"); include_once $_SERVER . '/securimage/securimage.php'; $securimage = new Securimage(); if ($securimage->check($_POST) == false) { //echo "The security code entered was incorrect.<br /><br />"; echo "The code you entered was incorrect. Please go <a href='javascript:history.go(-1)'>back</a> and try again. "; exit; } $captcha=$_POST; if (strtolower($captcha)== 'captcha_valid') { echo 'You have been validated.'; } else { header( 'Location: checkFrom.php?retry=yes'); } .. .. <!--SNIPPETS DATABASE CONNECTION--> $table_fields = array( "name", "tel"); .. .. $connection = mysql_connect (DB_SERVER, DB_USER, DB_PASS) or die ( 'I cannot connect to the database because: ' . mysql_error()); mysql_select_db (DB_NAME, $connection); mysql_query ($query, $connection) or die(mysql_error(). "\n<br />This is the query:\n<br />".$query); .. .. header ( "Location:thankyou.php"); } ?> </pre>
    Sorry about the repetitive threads, I didn't how to delete them.

    Please consider the last thread as my reply.

    By the way, I did not know why you have to put value on the field input as if you did this means the field will be filled with captcha_valid instead of blank field.

    
    <form name=
    "formname" method=
    "post" action=
    "ProcessForm.php"> <input type=
    "text" name=
    "captcha_code" value=
    "captcha_valid" /><br/> <input type=
    "submit" /> </form>
    


    I am sorry if my explanation not so clear and you did not get what I am trying to achieve. But I hope with the code I provided above will give you clear picture.

    Thanks!
  • SystemAdmin
    SystemAdmin
    1140 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-18T14:53:30Z  
    • Siabanie
    • ‏2011-07-17T18:13:50Z
    Sorry about the repetitive threads, I didn't how to delete them.

    Please consider the last thread as my reply.

    By the way, I did not know why you have to put value on the field input as if you did this means the field will be filled with captcha_valid instead of blank field.

    <pre class="jive-pre"> <form name= "formname" method= "post" action= "ProcessForm.php"> <input type= "text" name= "captcha_code" value= "captcha_valid" /><br/> <input type= "submit" /> </form> </pre>

    I am sorry if my explanation not so clear and you did not get what I am trying to achieve. But I hope with the code I provided above will give you clear picture.

    Thanks!
    By the way, I did not know why you have to put value on the field input as if you did this means the field will be filled with captcha_valid instead of blank field.
    You did not know why? I can put nothing there sure. I put something there to help you, that's all, fearing you have no idea what is to be demonstrate. Did you run the demo and did you thereby understand what is the essence of it all about? If not, I am not ready to help...
  • SystemAdmin
    SystemAdmin
    1140 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-18T15:00:50Z  
    • Siabanie
    • ‏2011-07-17T17:55:08Z
    Hi tsuji,

    Thanks for your feedback and thoughts, I have tried to put them together but the "error message" for CAPTCHA still not working as it should be.

    I would like an error message (pop up) show on the first page (checkForm.php) when user entered a wrong code/secureimage. At the moment the error message showing on the next page (processFrom.php).

    Here I show you the entire code:
    checkForm.php
    <pre class="jive-pre"> <?php session_start(); require( "include/application_top.php"); $err_msg= ''; if (isset($_GET) && $_GET== 'yes') { $err_msg= 'you were not validated, try again?'; } ?> <head> <script type= "text/javascript"> $(document).ready(function() { $( '#btn_submit').click(function() { var error_num = 0; var error_mesg = ""; $( 'name=name').parent().removeClass( 'error'); if($( 'name=name').val()== "") { error_num++; error_mesg += "Please enter your name \n"; $( 'name=name').parent().addClass( 'error'); } $( 'name=tel').parent().removeClass( 'error'); if($( 'name=tel').val()== "") { error_num++; error_mesg += "Please enter telephone no\n"; $( 'name=tel').parent().addClass( 'error'); } $( 'name=captcha_code').parent().removeClass( 'error'); if($( 'name=captcha_code').val()== "") { error_num++; error_mesg += "Please enter the image verification\n"; $( 'name=captcha_code').parent().addClass( 'error'); } if(error_num>0) { alert(error_mesg); } else if(error_num==0) { $( '#present_form').submit(); } return false; }); }); </script> </head> <body> <form name= "check_form" id= "check_form" method= "post" action= "processForm.php"> <table width= "100%" border= "0" cellspacing= "5" cellpadding= "0"> <tr> <td width= "20%">Name</td> <td width= "80%"><input name= "name" type= "text" id= "name" size= "30" /></td> </tr> <tr> <td>Tel</td> <td><input name= "tel" type= "text" id= "tel" size= "30" /></td> </tr> </table> <dl> Please enter the text that you see in the image into the box on below. </dl> <table width= "100%" border= "0" cellspacing= "5" cellpadding= "0"> <tr> <td width= "20%"><input type= "text" name= "captcha_code" size= "20" maxlength= "6" /> Different Image </td> <td width= "80%">CAPTCHA Image</td> </tr> </table> <input name= "btn_submit" type= "button" id= "btn_submit" value= "Submit" /> </form> <?php if ($err_msg!= '') { echo $err_msg; } ?> </body> </html> </pre>

    processForm.php

    <pre class="jive-pre"> <?php session_start(); require( "include/application_top.php"); include_once $_SERVER . '/securimage/securimage.php'; $securimage = new Securimage(); if ($securimage->check($_POST) == false) { //echo "The security code entered was incorrect.<br /><br />"; echo "The code you entered was incorrect. Please go <a href='javascript:history.go(-1)'>back</a> and try again. "; exit; } $captcha=$_POST; if (strtolower($captcha)== 'captcha_valid') { echo 'You have been validated.'; } else { header( 'Location: checkFrom.php?retry=yes'); } .. .. <!--SNIPPETS DATABASE CONNECTION--> $table_fields = array( "name", "tel"); .. .. $connection = mysql_connect (DB_SERVER, DB_USER, DB_PASS) or die ( 'I cannot connect to the database because: ' . mysql_error()); mysql_select_db (DB_NAME, $connection); mysql_query ($query, $connection) or die(mysql_error(). "\n<br />This is the query:\n<br />".$query); .. .. header ( "Location:thankyou.php"); } ?> </pre>
    I would like an error message (pop up) show on the first page (checkForm.php)...
    You sure would like this or that. There are thousand of ways one may want the page to behave. The point is if you get the main behaviour set up, the detail is your business. Client-side behaviour is quite independent of the redirect etc...

    You can do this, for instance.
    
    <script type=
    "text/javascript"> var err_msg=
    "<?php echo $err_msg; ?>"; $(window).load(function() 
    { 
    
    if (err_msg.length!=0) 
    { alert(err_msg); 
    } 
    }); </script>
    
  • Siabanie
    Siabanie
    10 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-18T22:42:35Z  
    I would like an error message (pop up) show on the first page (checkForm.php)...
    You sure would like this or that. There are thousand of ways one may want the page to behave. The point is if you get the main behaviour set up, the detail is your business. Client-side behaviour is quite independent of the redirect etc...

    You can do this, for instance.
    <pre class="jive-pre"> <script type= "text/javascript"> var err_msg= "<?php echo $err_msg; ?>"; $(window).load(function() { if (err_msg.length!=0) { alert(err_msg); } }); </script> </pre>
    Thanks tsuji,

    I am working on it now and will add as you suggest - I will have to read the code slowly and make sure I know what I am doing.

    Will keep you posted about it.
    Thanks once again.
  • Siabanie
    Siabanie
    10 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-19T11:43:51Z  
    I would like an error message (pop up) show on the first page (checkForm.php)...
    You sure would like this or that. There are thousand of ways one may want the page to behave. The point is if you get the main behaviour set up, the detail is your business. Client-side behaviour is quite independent of the redirect etc...

    You can do this, for instance.
    <pre class="jive-pre"> <script type= "text/javascript"> var err_msg= "<?php echo $err_msg; ?>"; $(window).load(function() { if (err_msg.length!=0) { alert(err_msg); } }); </script> </pre>
    Hi tsuji,

    I have understood about the field, yes it did give me a clear picture what you are talking about. Thank you!

    I have put all the code that you suggested and try to do "trail and error" to see what is going on - but the problem is;

    1. If I entered either a correct password or wrong password. The error message still show up.

    Can you please tell me where did I do wrong here?

    Here are snippets of my code:

    checkForm.php
    
    <?php session_start(); require(
    "include/application_top.php");   $err_msg=
    ''; 
    
    if (isset($_GET[
    'retry']) && $_GET[
    'retry']==
    'yes') 
    { $err_msg=
    'The code you entered was incorrect, try again?'; 
    } ?> <html><head> <script type=
    "text/javascript"> var err_msg=
    "<?php echo $err_msg; ?>"; $(window).load(function() 
    { 
    
    if (err_msg.length!=0) 
    { alert(err_msg); 
    } 
    }); </script>   <script type=
    "text/javascript">   $(document).ready(function()
    {   $(
    '#btn_submit').click(function() 
    { var error_num = 0; var error_mesg = 
    ""; $(
    '[name=name]').parent().removeClass(
    'error'); 
    
    if($(
    '[name=name]').val()==
    "")
    { error_num++; error_mesg += 
    "Please enter name\n"; $(
    '[name=name]').parent().addClass(
    'error'); 
    } $(
    '[name=captcha_code]').parent().removeClass(
    'error'); 
    
    if($(
    '[name=captcha_code]').val()==
    "")
    { error_num++; error_mesg += 
    "Please enter the image verification\n"; $(
    '[name=captcha_code]').parent().addClass(
    'error'); 
    } 
    
    if(error_num>0)
    { alert(error_mesg); 
    }
    
    else 
    
    if(error_num==0)
    { $(
    '#present_form').submit(); 
    } 
    
    return 
    
    false; 
    });   
    }); </script> </head> <body> <form name=
    "present_form" id=
    "present_form" method=
    "post" action=
    "processForm.php">   <table width=
    "100%" border=
    "0" cellspacing=
    "5" cellpadding=
    "0"> <tr> <td width=
    "20%">Name</td> <td width=
    "80%"><input name=
    "name" type=
    "text" id=
    "name" size=
    "30" /></td> </tr> </table>   <dl> Please enter the text that you see in the image into the box on below. </dl> <table width=
    "100%" border=
    "0" cellspacing=
    "5" cellpadding=
    "0"> <tr> <td width=
    "20%"><input type=
    "text" name=
    "captcha_code" size=
    "20" maxlength=
    "6" /> <a href=
    "#"> [ Different Image ]</a></td> <td width=
    "80%"><img id=
    "captcha" src=
    "/securimage/securimage_show.php" alt=
    "CAPTCHA Image"/></td> </tr> </table> <div class=
    "btn"><input name=
    "btn_submit" type=
    "button" id=
    "btn_submit" value=
    "Submit" /></div> </div> </form>   <div id=
    "message"> <?php 
    
    if ($err_msg!=
    '') 
    { echo $err_msg; 
    } ?> </div> </body></html>
    


    Here is the snippets for processForm.php
    processForm.php
    
    <?php session_start(); require(
    "include/application_top.php");   include_once $_SERVER[
    'DOCUMENT_ROOT'] . 
    '/securimage/securimage.php'; $securimage = 
    
    new Securimage();   $captcha=$_POST[
    'captcha_code']; 
    
    if (strtolower($captcha)==
    'captcha_valid') 
    { $table_fields = array(
    "name"); $table_name = 
    "present";   $CHARSET_ENCODING=
    "UTF-8"; $EMAIL_HEADER_EOL=
    "\n"; .. .. $standard_emailheaders=
    "MIME-Version: 1.0".$EMAIL_HEADER_EOL; .. 
    
    if(isset($_POST[
    'name']))
    { $connection = mysql_connect (DB_SERVER, DB_USER, DB_PASS) or die (
    'I cannot connect to the database because: ' . mysql_error()); .. .. 
    } mysql_query ($query, $connection) or die(mysql_error().
    "\n<br />This is the query:\n<br />".$query); .. .. $notification_subject=
    "Application Received"; $notification_headers.=$standard_emailheaders; mail($notification_subject,$notification_headers); header (
    "Location: thankyou.php"); 
    } 
    }   
    
    else 
    { header(
    'Location: checkFrom.php?retry=yes'); 
    }   ?>
    
  • Siabanie
    Siabanie
    10 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-19T12:04:06Z  
    I would like an error message (pop up) show on the first page (checkForm.php)...
    You sure would like this or that. There are thousand of ways one may want the page to behave. The point is if you get the main behaviour set up, the detail is your business. Client-side behaviour is quite independent of the redirect etc...

    You can do this, for instance.
    <pre class="jive-pre"> <script type= "text/javascript"> var err_msg= "<?php echo $err_msg; ?>"; $(window).load(function() { if (err_msg.length!=0) { alert(err_msg); } }); </script> </pre>
    Just to add that, the reason I did not put the "value=captcha_valid" as here:

    
    .. <td width=
    "20%"><input type=
    "text" name=
    "captcha_code" size=
    "20" maxlength=
    "6" value=
    "captcha_valid"/> <a href=
    "#"> [ Different Image ]</a></td> ..
    


    is because, whenever I refresh the page (checkForm.php) the error message pop up "The code you entered was incorrect, try again?" before I able to fill in the form.

    I'm new in web app, and your kind help would be highly appreciated.
    Thanks.
  • SystemAdmin
    SystemAdmin
    1140 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-19T12:56:31Z  
    Just to add that, the reason I did not put the "value=captcha_valid"...

    That is what you should do. That part is purely my demo-specific. That value is user's entering each time to fence of robot...

    And then, I see you have this in the processForm
    if (strtolower($captcha)=='captcha_valid') {

    Again, this value string 'captcha_valid' is my demo-specific, you should restore you original mechanic to check against the value embedded in an image or whatever and that server-side should have prior knowledge of it to check against via whatever mechanism probably some combination of data from session variables and/or dbase and/or other procedure... Brief, restore something in the original post and figuratively suggested in my first response...
    
    $securimage = 
    
    new Securimage(); 
    
    if ($securimage->check($_POST) == 
    
    false) 
    { 
    //this is where redirect probably would occur... 
    }
    
  • Siabanie
    Siabanie
    10 Posts

    Re: JavaScript + AJAX + PHP = CAPTCHA

    ‏2011-07-21T12:10:04Z  
    Just to add that, the reason I did not put the "value=captcha_valid"...

    That is what you should do. That part is purely my demo-specific. That value is user's entering each time to fence of robot...

    And then, I see you have this in the processForm
    if (strtolower($captcha)=='captcha_valid') {

    Again, this value string 'captcha_valid' is my demo-specific, you should restore you original mechanic to check against the value embedded in an image or whatever and that server-side should have prior knowledge of it to check against via whatever mechanism probably some combination of data from session variables and/or dbase and/or other procedure... Brief, restore something in the original post and figuratively suggested in my first response...
    <pre class="jive-pre"> $securimage = new Securimage(); if ($securimage->check($_POST) == false) { //this is where redirect probably would occur... } </pre>
    HI tsuji,

    I think I know what you mean the problem is the the "value = ......" isn't matching the secure image. So I think it needs to be done in PHP e.g:

    checkForm.php

    
    ..   <input type=
    "text" name=
    "captcha_code" size=
    "20" maxlength=
    "6" value=
    "<?php ....... ?>"/>   <a href=
    "#">   [ Different Image ]</a></td>   ..
    


    processForm.php

    
    
    
    if (strtolower($captcha)==
    '<?php ....... ?>')   
    //If the code is match/correct redirect to thankyou.php   
    //Place all the DB connection and tables   header (Location: thankyou.php);     
    }
    
    else   header (location: checkForm.php?retry=yes);
    


    I do not understand why you have to go back to this again:

    processForm.php

    
    $securimage = 
    
    new Securimage();   
    
    if ($securimage->check($_POST) == 
    
    false) 
    {   
    //this is where redirect probably would occur...   
    }
    


    as you suggested me to use the: "(strtolower($captcha)==')..."

    But the problem is I do not know How I can do the PHP code matching? How about doing it in jQuery.ajax? Would that be much simpler?