Jquery submit() html表单基于php脚本的返回值

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.

好吧，如果有人能看一下，我真的很感激。我在html表单中实现了一个验证码。captcha是基于php的，所以我需要使用jquery将提交的表单提交给captcha检查脚本。

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

如果检查正确，php脚本返回1，如果检查错误，返回0。

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:

这一切都很好，我遇到的问题是实际提交表单，或者根据php脚本返回的内容阻止它。我的代码如下:

                <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

我希望发生的是，当我的success函数返回false时，它会阻止表单提交。如果返回true，则继续提交表单。这就是我想要的

$('#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.

我不擅长javascript中的函数作用域。如果我在success函数中定义一个变量，我就不能检查表单submit函数中的值，因为它只有一个局部作用域。我可以使用一个链接提交表单，然后调用submit();但是，我希望没有java的用户可以访问这个表单。

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

是否有办法将ajax post成功函数的结果返回到submit()处理程序的范围?

4 个解决方案

#1

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调用的成功函数中提交表单。AJAX调用也不应该在表单提交时抛出。在支票兑现之前，表格不应该以任何方式提交。即:

$.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.

至于“作用域”，这应该不是一个“作用域”问题。如果你需要进一步的指导，请告诉我。

#2

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

我只会像这样在一个结果上设置submitForm。

$('#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;  
});

#3

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.

我建议在您的success函数中调用$('#contactform').submit()，但这只会再次调用事件处理程序，您将陷入循环。

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

相反，您可以调用表单元素的submit函数，如下所示:

$('#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;
    }
}

#4

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

尝试在submit按钮上进行ajax调用，单击表单submit上的not。

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

如果单击调用的返回值为true，则调用submit函数。

#1

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