0

我有一个带有验证码的联系我们表单。我提交按钮单击如果成功，我需要使用第一个 AJAX 请求执行服务器端验证码，然后我调用第二个 AJAX/Jquery/php 发送联系我们邮件。

但是第一个 AJAX 调用是成功的，但是第二个没有调用..请帮我解决这个问题..

<form
id="RegisterUserForm"
name="RegisterUserForm"
action=""
onsubmit="return submitform();"
method="post">
    <fieldset
    style="border: 0;">
        <table
        width="100%">
            <tr>
                <td
                width="150">
                    <div
                    class="celebrationContent">
                        Name:</div>
                        </td>
                        <td
                        class="style1">
                            <input
                            id="Name"
                            type="text"
                            name="Name"
                            style="border-style: none; background-color: #fffcc4;
                        width: 275px;"
                            />
                            </td>
            </tr>
            <tr>
                <td>
                    <div
                    class="celebrationContent">
                        E-mail
                        id:</div>
                </td>
                <td
                class="style1">
                    <input
                    id="email"
                    type="text"
                    name="email"
                    style="border-style: none; background-color: #fffcc4;
                        width: 274px;"
                    />
                    </td>
            </tr>
            <tr>
                <td
                class="celebrationContent">
                    Phone
                    Number:
                    </td>
                    <td
                    class="style1">
                        <input
                        id="phonenumber"
                        type="text"
                        name="phonenumber"
                        style="border-style: none;
                        background-color: #fffcc4; width: 274px;"
                        />
                        </td>
            </tr>
            <tr>
                <td
                class="celebrationContent">
                    Your
                    Celebration:
                    </td>
                    <td
                    class="style1">
                        <input
                        id="yourCelebration"
                        type="text"
                        name="yourCelebration"
                        style="border-style: none;
                        background-color: #fffcc4; width: 274px; height: auto;"
                        />
                        </td>
            </tr>
            <tr>
                <td
                class="celebrationContent">
                    When
                    is
                    it:
                    </td>
                    <td
                    class="style1">
                        <input
                        type="text"
                        name="datepicker"
                        id="datepicker"
                        style="border-style: none; background-color: #fffcc4;
                        width: 272px;"
                        />
                        </td>
            </tr>
            <tr>
                <td
                class="celebrationContent">
                    Enquiry:
                    </td>
                    <td
                    class="style1">
                        <input
                        type="text"
                        id="Enquiry"
                        name="Enquiry"
                        style="border-style: none; background-color: #fffcc4;
                        width: 272px; height: 70px;"
                        />
                        </td>
            </tr>
            <tr>
                <td
                colspan="2"
                align="left"
                class="celebrationContent">
                    Verification
                    Code
                    </td>
            </tr>
            <tr>
                <td
                align="left"
                colspan="2">
                    <table
                    width="100%">
                        <tr>
                            <td
                            width="32%">
                                <img
                                src="captcha.php"
                                alt="celebration captcha"
                                />
                                </td>
                                <td>
                                    <input
                                    type="text"
                                    id="verificationcode"
                                    name="verificationcode"
                                    style="border-style: none;
                                    background-color: #fffcc4"
                                    />
                                </td>
                        </tr>
                        </table>
                        </td>
            </tr>
            <tr>
                <td
                colspan="2"
                align="center">
                    <input
                    type="submit"
                    id="form_submit"
                    />
                    </td>
            </tr>
            </table>
            </fieldset>
            </form>

jQuery代码是

<script type="text/javascript">
        $(function () {
            $('#datepicker').datepicker('option', 'dateFormat', 'dd-mm-yy');            
        });

        $("#datepicker").datepicker({
            minDate: 0
        });

    function submitform() {

        if (validateCaptach()) {
            var sData = $("#RegisterUserForm").serialize();
             alert('i am here to process..');  
            $.ajax({
                type: "POST",
                url: "thankyou.php",
                data: sData,
                //async: false,
                success: function (data) {
                    if (data == "YESSUCCESS") {
                        alert("Your Query has been sent..");
                       return true;
                    } else {
                        alert("some error please type again...");
                        return false; 
                    }
                }
            });
        }
        return false;
    }

    function validateCaptach() {
        if (validateForm()) {
            var captchaval = $("#verificationcode").val();
            $.ajax({
                type: "POST",
                url: "captchacheck.php",
                async: false,
                data: {
                    verificationcode: captchaval
                },
                success: function (data) {
                    if (data == "SUCCESS") {
                        alert("captchacheck success..");
                        return true;
                    } else {
                        alert("The security code you typed was wrong. Please try again.");
                        return false;
                    }
                }
            });
        }
    }

    function validateForm() {

        if (document.RegisterUserForm.Name.value == "") {
            alert("Please provide your name!");
            document.RegisterUserForm.Name.focus();
            return false;
        }

        if (document.RegisterUserForm.email.value == "") {
            var emailID = document.RegisterUserForm.email.value;
            atpos = emailID.indexOf("@");
            dotpos = emailID.lastIndexOf(".");
            if (atpos < 1 || (dotpos - atpos < 2)) {
                alert("Please enter correct email ID")
                document.RegisterUserForm.email.focus();
                return false;
            }
        }

        if ((document.RegisterUserForm.phonenumber.value == "") || isNaN(document.RegisterUserForm.phonenumber.value)) {
            alert("Please enter your phone Number");
            document.RegisterUserForm.phonenumber.focus();
            return false;
        }
        if (document.RegisterUserForm.yourCelebration.value == "") {
            alert("Please enter your Celebration!");
            document.RegisterUserForm.yourCelebration.focus();
            return false;
        }
        if (document.RegisterUserForm.datepicker.value == "") {
            alert("Please select date !");
            document.RegisterUserForm.datepicker.focus();
            return false;
        }
        if (document.RegisterUserForm.Enquiry.value == "") {
            alert("Please Enter your enquiry!");
            document.RegisterUserForm.Enquiry.focus();
            return false;
        }
        if (document.RegisterUserForm.verificationcode.value == "") {
            alert("Please enter the Verificationcode!");
            document.RegisterUserForm.verificationcode.focus();
            return false;
        }
        return (true);
    }    

    </script>
4

4 回答 4

1

你没有从validateCaptach(). 您从 AJAX 回调函数返回true或返回false，但这些值不会去任何地方。

function validateCaptach() {
    if (validateForm()) {
        var captchaval = $("#verificationcode").val();
        var success;
        $.ajax({
            type: "POST",
            url: "captchacheck.php",
            async: false,
            data: {
                verificationcode: captchaval
            },
            success: function (data) {
                if (data == "SUCCESS") {
                    alert("captchacheck success..");
                    success = true;
                } else {
                    alert("The security code you typed was wrong. Please try again.");
                    success = false;
                }
            }
        });
        return success;
    }
}
于 2013-07-02T05:46:45.727 回答
1

您没有从validateCaptach. 事件的返回值success不会以您处理代码的方式返回给调用函数。所以为了让你得到想要的输出。success如果您来电，您必须从 with 拨打第二个ajax电话。

例如

  .....
  success: function(e) {
      callSecondFunction();
  }

这将是最好的方法。

于 2013-07-02T05:44:50.733 回答
0

我不明白你为什么要为此使用两个 AJAX 请求。这没有任何意义。

您可以在单个 AJAX 调用中验证所有内容。请进行验证码检查并提交表格 captchacheck.php

于 2013-07-02T05:45:46.867 回答
0

当您使用异步调用时，函数validateCaptcha会在 ajax 调用完成之前完成。您需要在第一个 ajax 调用成功返回后发送第二个 ajax 调用。

<script type="text/javascript">
$(function(){
    $('#datepicker').datepicker('option', 'dateFormat', 'dd-mm-yy');            
});

$("#datepicker").datepicker({
    minDate: 0
});

function submitform () {
    /**
     * Pass the second ajax call as a function
     */
    validateCaptcha(function(){
        var sData = $("#RegisterUserForm").serialize();
        alert('i am here to process..');  

        $.ajax({
            type: "POST",
            url: "thankyou.php",
            data: sData,
            //async: false,
            success: function (data) {
                if (data == "YESSUCCESS") {
                    alert("Your Query has been sent..");
                   return true;
                }
                else {
                    alert("some error please type again...");
                    return false; 
                }
            }
        });
    });

    return false;
}

function validateCaptcha (action) {
    if (validateForm()) {
        var captchaval = $("#verificationcode").val();

        $.ajax({
            type: "POST",
            url: "captchacheck.php",
            async: false,
            data: {
                verificationcode: captchaval
            },
            success: function (data) {
                if (data == "SUCCESS") {
                    alert("captchacheck success..");

                    if (typeof action == "function") {
                        action();
                    }

                    return true;
                }
                else {
                    alert("The security code you typed was wrong. Please try again.");
                    return false;
                }
            }
        });
    }
}

function validateForm () {
    if ($("#RegisterUserForm [name=Name]").val() == "") {
        alert("Please provide your name!");
        $("#RegisterUserForm [name=Name]").focus();
        return false;
    }

    if ($("#RegisterUserForm [name=email]").val() == "") {
        var emailID = $("#RegisterUserForm [name=email]").val();
        atpos = emailID.indexOf("@");
        dotpos = emailID.lastIndexOf(".");

        if (atpos < 1 || (dotpos - atpos < 2)) {
            alert("Please enter correct email ID")
            $("#RegisterUserForm [name=email]").focus();

            return false;
        }
    }

    if (($("#RegisterUserForm [name=phonenumber]").val() == "") || isNaN($("#RegisterUserForm [name=phonenumber]").val())) {
        alert("Please enter your phone Number");
        $("#RegisterUserForm [name=phonenumber]").focus();

        return false;
    }

    if ($("#RegisterUserForm [name=yourCelebration]").val() == "") {
        alert("Please enter your Celebration!");
        $("#RegisterUserForm [name=yourCelebration]").focus();

        return false;
    }

    if ($("#RegisterUserForm [name=datepicker]").val() == "") {
        alert("Please select date !");
        $("#RegisterUserForm [name=datepicker]").focus();

        return false;
    }

    if ($("#RegisterUserForm [name=Enquiry]").val() == "") {
        alert("Please Enter your enquiry!");
        $("#RegisterUserForm [name=Enquiry]").focus();

        return false;
    }

    if ($("#RegisterUserForm [name=verificationcode]").val() == "") {
        alert("Please enter the Verificationcode!");
        $("#RegisterUserForm [name=verificationcode]").focus();

        return false;
    }

    return true;
}
</script>
于 2013-07-02T05:59:02.147 回答