Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

Ok, if somebody could take a look at this, I'd really appreciate it. I'm implementing a captcha in an html form. The captcha is php based, so i need to use jquery to post the submitted form to the captcha check script.

The php script returns 1 if the check was correct, or 0 if it was incorrect.

This is all working great, the problems i am having are with actually submitting the form, or preventing it based on what the php script returns. My the code is as follows:

                <form id="contactform" action="FormHandler.cgi" method="POST">
    <input name="requiredContact" size="25" type="text" />

    <input name="requiredEmailFrom" size="25" type="text" />
    <input name="requiredTelephone" size="18" tabindex="3" />
    <textarea cols="25" name="comments" rows="4"></textarea>
    <select length="2" name="requiredContactMethod" tabindex="5">
    <option selected="" value="Email">Email</option>
    <option value="Telephone">Telephone</option>
    </select>
    <img src="captcha/captcha.php" style="float:none; margin:0px 0px -8px 0px; height:26px;"></img>
    <input type="text" id="CAPTCHA" style="margin-left: -5px; height:26px;">
            <p id="caperror"></p>
    <p><input name="B1" type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input name="B2" type="reset" value="Clear" /></p>
</form> 

<script>



$('#contactform').submit(function(){
var cap = $('#CAPTCHA').val();  
cap = 'CAPTCHA=' + cap;

$.ajax({
type: 'POST',
url: 'captcha/capcheck.php',
data: cap,
dataType: "text",
error: postfail,
 success: success
});

return false;  //Temporary, to stop the form no matter what.
});

function success(result){

if(result == 1){
alert('was correct');
return true;
}
else{
alert("error" + result);
return false;
}


}

function postfail(){
alert('post failed');
    return false;
}


</script>

So what i would like to happen, is when my success function returns false, it stops the form from submitting. If it returns true, go ahead and submit the form. This is what I would like

$('#contactform').submit(function(){


//The ajax post here

//check the value of the ajax success function here;

if(success(result)) {
return true;
}
else {
return false;
}
});

I am not good with function scopes in javascript. If I define a variable inside the success function, I can't check the value in the form submit function, because it only has a local scope. I could just use a link to submit the form, and then call submit(); but I want the form to be accessible to those without java.

Is there any way to get the ajax post success function's result back to the scope of the submit() handler?

share|improve this question

4 Answers

up vote 1 down vote accepted

Unless I'm missing something, you should be submitting the form in the AJAX call's success function. The AJAX call should also not be being thrown upon form submit. The form should not be being submitted in any way until the check has come back true. IE:

$.ajax(
    //Parameters and stuff
    ).success(function() {
        //Submit the form
        $('#contactform').submit();
    }).fail(function() {
        //Onoes your call has failed. Do not submit le form :(
    });

As far as "scoping" goes, this shouldn't be a "scoping" issue. Let me know if you need further instruction.

share|improve this answer
1  
api.jquery.com/submit – mrtsherman Jun 27 '11 at 18:57
Creates an infinite loop... This is what I tried first. since I call a submit inside the submit handler, it just reiterates back through to infinity. – Ben Jun 27 '11 at 19:00
Like I said, this event should not be attached to the submit handler. Attach a CLICK event somewhere that fires this, and then upon success subsequently fire the submit event. – MoarCodePlz Jun 27 '11 at 19:04
Ok, thanks. I don't know why I didn't think to just put everything in a click handler. The submit() method seemed to be the best option at the time. – Ben Jun 27 '11 at 19:15
up vote 1 down vote

I would write the function like this only setting submitForm on a 1 result.

$('#contactform').submit(function(){
   var submitForm = False;
   var cap = $('#CAPTCHA').val();  
   cap = 'CAPTCHA=' + cap;

$.ajax({
   type: 'POST',
   url: 'captcha/capcheck.php',
   data: cap,
   dataType: "text",       
   success:function(result){
       if(result == 1){
          submitForm = True;
       }
   }
   });

    return submitForm;  
});
share|improve this answer
up vote 1 down vote

I was going to suggest that in your success function you call $('#contactform').submit(), but that would just call your event handler again and you'd be stuck in a loop.

What instead you can do is call the form element's submit function, like this:

$('#contactform').submit(function(){
    var cap = $('#CAPTCHA').val();  
    cap = 'CAPTCHA=' + cap;
    myform = this; // added this line

    $.ajax({
        type: 'POST',
        url: 'captcha/capcheck.php',
        context: myform, //added this line
        data: cap,
        dataType: "text",
        error: postfail,
        success: success
    });

    return false;  //Temporary, to stop the form no matter what.
});

function success(result){
    // because we added the context option, we can now access the form with the "this" keyword
    if(result == 1){
        alert('was correct');
        // $('#contactform').submit() // this will make an infinite loop
        this.submit();  // this will submit the form
        return true;
    }else{
        alert("error" + result);
        return false;
    }
}
share|improve this answer
hmm interesting looking, but I couldn't get this to work? Went with MoarCodePlz's example, but thank you. – Ben Jun 27 '11 at 19:16
up vote 0 down vote

Try making the ajax call on the submit button click not on the form submit.

If the return of the click call is true, you call the submit function.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.