php - 最初の結果に基づいて別の jquery/AJAX/php リクエストを呼び出すと失敗する

Question

キャプチャ付きのお問い合わせフォームがあります。ボタンのクリックを送信します。成功した場合は、最初の AJAX リクエストを使用してサーバー側のキャプチャ検証を実行する必要があります。

しかし、最初のAJAX呼び出しは成功ですが、2番目の呼び出しは呼び出されていません..これについて親切に助けてください..

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

Answer 1

から値を返していませんvalidateCaptach。イベントからの戻り値はsuccess、コードを処理した方法では呼び出し関数に返されません。したがって、目的の出力を得るために。success通話が発生した場合は、 から 2 番目の通話を発信する必要がありますajax。

例えば

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

これが最善のアプローチです。

Answer 2

から何も返していませんvalidateCaptach()。trueまたはAJAX コールバック関数から戻り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;
    }
}

Answer 3

これに 2 つの AJAX リクエストを使用している理由がわかりません。これは意味がありません。

1 回の AJAX 呼び出しですべてを確認できます。キャプチャチェックを行い、フォームを送信してください captchacheck.php

Answer 4

非同期呼び出しを使用しているvalidateCaptchaため、ajax 呼び出しが完了する前に関数が終了します。最初の ajax 呼び出しが正常に返された後、2 番目の 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>