How to prevent form submit if Ajax returns false

Question

Hello I am using old way to use Ajax, not using jQuery. I want to stop form submitting if my ajax code returns false. I am calling an Ajax function on submit and returning back to jsp form.
Here is my code:

<form name="signupform" method="post"  action="../TenantSignup" onsubmit="return checkCaptcha1()">
</form>

here is the ajax code:

function checkCaptcha1(){
alert("inside checkCaptcha1");
//alert(document.signupform.recaptcha_response_field.value.trim());
var recaptcha_challenge_field = document.signupform.recaptcha_challenge_field.value.trim();
alert(recaptcha_challenge_field);
var recaptcha_response_field = document.signupform.recaptcha_response_field.value.trim();
alert(recaptcha_response_field);
if(recaptcha_response_field.trim()==""){
    document.getElementById("captcha").innerHTML = "Enter CAPTCHA Code";
    return false;
}else{
    xmlHttp=GetXmlHttpObject();
    alert(XMLHttpRequest);
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return false;
    }
    var url="../ajax/checkCaptcha.jsp";
    url=url+"?recaptcha_challenge_field="+recaptcha_challenge_field+"&"+"recaptcha_response_field="+recaptcha_response_field;
    alert(url);
    xmlHttp.onreadystatechange=showData;
    xmlHttp.open("GET",url,false);
    xmlHttp.send(null);
}

 }

 function showData(){
if (xmlHttp.readyState==4 || xmlHttp.readyState==200)
{
    alert("hello");
    var showdata = xmlHttp.responseText;
    alert(showdata);
    var str = showdata.split("#$");
    //alert("inside checkCaptcha2 str="+str);
    alert("Str[1]="+str[1]);
    if(str[1]=="fail"){
        alert(str[1]);
        document.getElementById("captcha").innerHTML = "CAPTCHA Validation Failed ! Try Again";
        //flag2=0;
        //alert("Set flag2="+flag2);
        return false;
        //window.location.href("signup.jsp");
    }
    else{
        //alert("Success");
        document.getElementById("captcha").innerHTML = "";
        //flag2 = 1;
        //alert("Set flag2="+flag2);
        //alert("Calling validate2()");
        //validate2();
        return true;
    }
}
else{

}
}
function GetXmlHttpObject()
{
alert("XML Object created");
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;
}

Here is the checkCaptcha.jsp Page:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="net.tanesha.recaptcha.ReCaptchaImpl"%>
<%@ page import="net.tanesha.recaptcha.ReCaptchaResponse"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<% System.out.println("Hello check CAPTCHA"); %>
<%  try{
        String remoteAddr = request.getRemoteAddr();
        System.out.println(remoteAddr);
        ReCaptchaImpl reCaptcha = new ReCaptchaImpl();
        reCaptcha.setPrivateKey("6LdlHOsSAAAAACe2WYaGCjU2sc95EZqCI9wLcLXY");

        String challenge = request.getParameter("recaptcha_challenge_field");
        System.out.println(challenge);
        String uresponse = request.getParameter("recaptcha_response_field");
        System.out.println(uresponse);
        ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(remoteAddr, challenge, uresponse);

        if (reCaptchaResponse.isValid()) {
            System.out.print("#$success#$");
            out.print("#$success#$");
        } else {
            System.out.print("#$fail#$");
            out.print("#$fail#$");
        }
    }catch(NullPointerException e){
        e.printStackTrace();
    }catch(Exception e){
        e.printStackTrace();
    }
  %>
</body>
</html>

I don't want to submit the form if the ajax retuns false.. but here it is still submitting the form if the ajax returns false. Here I am using synchronous request, even if I make asynchronous request same thing happens.

Please help me Thank you.

Answer 1

I would force the form's onsubmit option to return false each time and submit the form's data via ajax, thus you can run a check to where ever you'd like and then submit the form. Then redirect to another page if needed. It's bulky but will work for forms that aren't too complicated.

How to prevent form submit if Ajax returns false

Question

1 answers

solution1
0 2014-04-24 12:54:49

How to prevent form submit if Ajax returns false

Question

1 answers

solution1 0 2014-04-24 12:54:49

solution1
0 2014-04-24 12:54:49