asked on

CAPTCHA Function that doesn't refresh whole form

Hi All,

I current maintain a rather large booking form and need to include CAPTCHA authentication as it is getting a lot of automated rubbish through it at the moment.

But what I am noticiing is that a lot of the CAPTCHA functions seem to refresh the form, meaning that the user has to start over again.

Does anyone know of a CAPTCHA function that doesn't do this or is it more like I need to tweak the form in some way to store form field data?

What happens currently is that when the form is submitted it posts its data to another ASP script to process into a DB.

Many thanks,

Rit

dosth

try this

<!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>
    <title>BotBoot</title>
    
    <script type="text/javascript">
    var a = Math.ceil(Math.random() * 10);
    var b = Math.ceil(Math.random() * 10);       
    var c = a + b
    function DrawBotBoot()
    {
        document.write("What is "+ a + " + " + b +"? ");
        document.write("<input id='BotBootInput' type='text' maxlength='2' size='2'/>");
    }    
    function ValidBotBoot(){
        var d = document.getElementById('BotBootInput').value;
        if (d == c) return true;        
        return false;
        
    }
    </script>
 
    
    
    
</head>
<body>
 
Are you human?<br />
 
<script type="text/javascript">DrawBotBoot()</script>
<input id="Button1" type="button" value="Check" onclick="alert(ValidBotBoot());"/>
 
 
 
 
 
</body>
</html>

Open in new window

hielo

Refer to the full example I posted here:
https://www.experts-exchange.com/questions/23461508/creating-captcha-with-a-form-that-onSubmit-return-submitForm-this.html

rito1

ASKER

Appologies for the delay both. A suprise stag weekend had slowed progress.

I will be looking at these solutions today and come back to you.

Rit

rito1

ASKER

Hi

In Dosth's example, it returns an alert of either true or false.

How could I..

If returns true, not pop up an alert box

If returns false, add a description rather than the word 'False' and make sure that when you click OK on the alert dialog that it doesn't submit the form still.

Many thanks,

Rit

dosth

how you need this changed, post your code

rito1

ASKER

Hi dosth

A simplified verison of code is attached...

Many thanks

<!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>My Simple Form</title>
<script type="text/javascript">
    var a = Math.ceil(Math.random() * 10);
    var b = Math.ceil(Math.random() * 10);       
    var c = a + b
    function DrawBotBoot()
    {
        document.write("What is "+ a + " + " + b +"? ");
        document.write("<input id='BotBootInput' type='text' maxlength='2' size='2'/>");
    }    
    function ValidBotBoot(){
        var d = document.getElementById('BotBootInput').value;
        if (d == c) return true;        
        return false;
        
    }
    </script>
</head>
 
<body>
<form action="bookingProc.asp" method="post">
<input class="txtform" type="text" size="10" name="Passengers" title="Number of passengers" /><br />
<script type="text/javascript">DrawBotBoot()</script><br />
<input type="submit" value=" Submit details >> " class="txtform" onclick="alert(ValidBotBoot());" />
</form>
</body>
</html>

Open in new window

dosth

please check

<!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>My Simple Form</title>
<script type="text/javascript">
    var a = Math.ceil(Math.random() * 10);
    var b = Math.ceil(Math.random() * 10);       
    var c = a + b
    function DrawBotBoot()
    {
        document.write("What is "+ a + " + " + b +"? ");
        document.write("<input id='BotBootInput' type='text' maxlength='2' size='2'/>");
    }    
    function ValidBotBoot(){
        var d = document.getElementById('BotBootInput').value;
        if (d == c) return true;        
        return false;
        
    }
    </script>
</head>
 
<body>
<form action="bookingProc.asp" method="post" onsubmit="return ValidBotBoot();">
<input class="txtform" type="text" size="10" name="Passengers" title="Number of passengers" /><br />
<script type="text/javascript">DrawBotBoot()</script><br />
<input type="submit" value=" Submit details >> " class="txtform" />
</form>
</body>
</html>

Open in new window

rito1

ASKER

Hi dosth

I see you have removed the OnClick event from the submit button and added an Onsubmit event to the form. This works well if the answer to the Captcha is correct as it processes the form.

But if it is incorrect, it doesn't return an alert type message to the user which was handy.

Rit

ASKER CERTIFIED SOLUTION

dosth

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial