Prevent a form submission on Ajax response

[Stefany93]

I have a contact form that gets processes with a Perl script. What I want to do is that when the user fills out the contact form and clicks submit, the reCAPTCHA would get processed and if the user had entered the correct CAPTCHA, it would return true,  if not, it would return false and the form would not get processed. Now since the hosting does not allow Perl modules to be installed in order CAPTCHA to be processed there, it must be processed with PHP, that is why I am processing the CAPTCHA with AJAX, behind the scenes. Now, I have done everything, the CAPTCHA gets processed, but hell I can't make it the form not to get submited when the AJAX script returns false. Please help me!

 

Here is the JS script

 

   function server_connect(){
// We declare the $connection variable which will hold the
// core object depending on the browser. Now we have set it 
// equal to false since we do not know the user's browser 
// yet and we haven't defined the variable with the proper 
// object.
    var connection = false;
// We check whether the browser is any browser but IE 6 -
// Since IE 7, that MS browser supports the XMLHttpRequest object.
        if(window.XMLHttpRequest){
// If the browser supports the object and it doesn't 
// return 'undefined' make a new instance of the object and
// assign it to the $connection variable.
// If not, set $connection to false which means
// this browser doesn't support the XMLHttpObject
// and that means the user has IE version below 7.
            if(typeof XMLHttpRequest != "undefined"){
                try{
                    connection = new XMLHttpRequest();
                }catch(e){
                    connection = false;
                }
            }
// If the above evaluation fails,
// we make a new evaluation to set $connection with the
// right object, in this case, for IE 6 -
        }else if(window.ActiveXObject){
            try{
                connection = new ActiveXObject('Microsoft.XMLHTTP');
            }catch(e){
                try{
                    connection = new ActiveXObject('Msxml2.XMLHTTP');
                }catch(e){
                    connection = false;
                }
            }
        }
// The return value of this function is
// either the right AJAX server connection object
// or false which means that AJAX cannot connect for some reason.
        return connection;
}
// We set the object to a variable and now we can use its properties
// and methods when connecting to the server behind the scenes.
    var connection = server_connect();
// It's easy :-)
// /****************************************************************************/
 
 
window.onload = function(){
  var submit_button = document.getElementById('submit_button');
  var cform = document.getElementById('cform');
    cform.onsubmit = function(){
      var response_text = document.ZIPTIE.recaptcha_response_field.value;
     var challenge_text = document.ZIPTIE.recaptcha_challenge_field.value;
        if(connection){
        connection.onreadystatechange = function(){
        if(connection.readyState == 4 && connection.status == 200){
            if(connection.responseText == 10){
                alert('OK');
                  return true; // Should return true if the responseText from verify.php is '10'
            }else{
                alert(false);
               return false; // Should return false  if the responseText from verify.php is  not 10
            }
        }
    }
// before
connection.open("GET","verify.php?c="+challenge_text+"&r="+response_text,true);
connection.send();
    }
    return false;
}
 
}

 

And the HTML:

 

 <form action="process.pl" method="post" name="ZIPTIE"   id="cform">
 
 
<br />
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><strong><font size="+2">Please tell us what you think!</font></strong></td>
  </tr>
</table>
 
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" >
<BR>
<TR>
    <td width="230" valign="middle"><STRONG>Your Name:</STRONG></TD>
    <td valign="middle"><INPUT NAME="name" SIZE="40" MAXLENGTH="100"></TD>
</TR>
<TR>
    <td valign="middle"><STRONG>Phone Number:</STRONG></TD>
    <td valign="middle"><INPUT NAME="phone_number" SIZE="40" MAXLENGTH="100"></TD>
</TR>
<TR>
    <td valign="middle"><STRONG>E-mail Address:</STRONG></TD>
    <td valign="middle"><INPUT NAME="email_address" SIZE="40" MAXLENGTH="100"></TD>
</TR>
 <TR>
    <td valign="middle"><img src="images/spacer.png" width="1" height="8" border="0" /></TD>
    <td valign="middle"></TD>
</TR>
   <TD WIDTH="230"><STRONG>Type of Feedback:</STRONG></TD>
    <TD>
    <SELECT NAME="type"> 
    <OPTION VALUE="Positive">Positive</OPTION>
    <OPTION VALUE="Complaint">Complaint</OPTION>
    <OPTION VALUE="Comment">Comment</OPTION>
    <OPTION VALUE="Request">Request</OPTION>
    </SELECT>
    </TD>
</tr>
<TR>
    <td valign="middle"><img src="images/spacer.png" width="1" height="8" /></TD>
    <td valign="middle"></TD>
</TR>
<tr>
<TD WIDTH="230"><STRONG>Store Location Your Writing About:</STRONG></TD>
    <TD>
    <SELECT NAME="location"> 
    <OPTION VALUE="Portland">Portland</OPTION>
    <OPTION VALUE="Grand Ledge">Grand Ledge</OPTION>
    <OPTION VALUE="St. Louis">St. Louis</OPTION>
    <OPTION VALUE="Linwood">Linwood</OPTION>
    <OPTION VALUE="Rosebush">Rosebush</OPTION>
    <OPTION VALUE="Tecumseh">Tecumseh</OPTION>
    <OPTION VALUE="South Lyon">South Lyon</OPTION>
    </SELECT>
    </TD>
</tr>
<TR>
    <td valign="middle"><img src="images/spacer.png" width="1" height="12" /></TD>
    <td valign="middle"></TD>
</TR>
<TR>
    <td valign="middle">Your Message:</TD>
    <td valign="middle"><textarea name="message" cols="65" rows="4"></textarea></TD>
</TR>
<TR>
    <td valign="middle"><img src="images/spacer.png" width="1" height="8" /></TD>
    <td valign="middle"></TD>
</TR>
<TR>
    <td valign="middle"><img src="images/spacer.png" width="5" height="8" />Human Verification:</TD>
    <td valign="middle">
 
 
    CAPTCHA!!!!
      
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Leh-OYSAAAAAHvM0Ty2b6CsHilEgu4mM8oEsdvG ">
    </script>
    <noscript>
     
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Leh-OYSAAAAAHvM0Ty2b6CsHilEgu4mM8oEsdvG "
    height="300" width="500" frameborder="0"></iframe><br>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40" id="challenge"></textarea>
 <input type="hidden" name="recaptcha_response_field" value="manual_challenge" id="response">
    </noscript>
    END OF CAPTCHA!!!
 
    </TD>
</TR>
</table>
<br />
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<TR>
    <td align="center">
    <FONT COLOR="#fff707"><strong>IMPORTANT!</strong> - We will not use your personal information in any manner other than you have approved!</FONT> 
    </TD>
</TR>
</TABLE>
<br />
<table align="center">
<TR>
    <TD>
    
    <INPUT TYPE="SUBMIT" VALUE="Submit" id="submit_button">    <INPUT TYPE="RESET" VALUE="Clear Form"></FORM></TD>

 

I didn't write the HTML form, it was written by someone else.

And I am not using jQuery because it is lame.

Edited February 12, 2014 by Stefany93

[kicken]

You can't wait for the result of your ajax script to decide if the initial form submission should be cancelled or not. When the form is initially submitted you need to just cancel that submission. Then you initiate your ajax request and wait for the response. If the response is good then you can re-submit the form using javascript's .submit() function.

 

In pseudo-code for example:

form.onsubmit=function(event){
   event.preventDefault(); //cancel submission

   var ajax=initAjax();
   ajax.onreadystatechange=function(){
       if (ajax.responseText=='success'){
           form.submit();
       }
   }
   ajax.send();

   return false; //older way of canceling submission just incase.
};

[Stefany93]

You can't wait for the result of your ajax script to decide if the initial form submission should be cancelled or not. When the form is initially submitted you need to just cancel that submission. Then you initiate your ajax request and wait for the response. If the response is good then you can re-submit the form using javascript's .submit() function.

 

In pseudo-code for example:

form.onsubmit=function(event){
   event.preventDefault(); //cancel submission

   var ajax=initAjax();
   ajax.onreadystatechange=function(){
       if (ajax.responseText=='success'){
           form.submit();
       }
   }
   ajax.send();

   return false; //older way of canceling submission just incase.
};

 

 

You are pure genius, thank you so much! 

Here is my final form, I hope someone else struggling with this problem could benefit from my experience.

 

 

window.onload = function(){
  var submit_button = document.getElementById('submit_button');
  var cform = document.getElementById('cform');
    cform.onsubmit = function(event){
        event.preventDefault();
       
      var response_text = document.ZIPTIE.recaptcha_response_field.value;
     var challenge_text = document.ZIPTIE.recaptcha_challenge_field.value;
        if(connection){
        connection.onreadystatechange = function(){
        if(connection.readyState == 4 && connection.status == 200){
            if(connection.responseText == 10){
                 alert('Thank you for your feedback!');
                cform.submit();
            }else{
                alert('Wrong Human Verification!');
                location.reload();
            }
        }
    }
// before
connection.open("GET","verify.php?c="+challenge_text+"&r="+response_text,true);
connection.send();
    }
}
 
}