html contact form with captcha submit to jquery&php .AJAX captcha validation request without form submit

I am new to jquery php..please help me on this issue to resolve.

我是jquery的新手php..please帮助我解决这个问题。

I have html contactus form with captcha.My requirement is .I have to validate the captcha before the form is being submitted . because the control values will be disappear .so that user has to reenter it with captcha.

我有带验证码的html联系表格。我的要求是。我必须在提交表单之前验证验证码。因为控件值将消失。因此用户必须使用验证码重新输入。

I used to send a ajax request to check the captcha ,its working . but the form also being submitted .form field values disappear. here the code please correct me where I am wrong

我曾经发送一个ajax请求来检查验证码，它的工作原理。但表单也被提交.form字段值消失。这里的代码请纠正我错在哪里

Reference Page

参考页面

1 个解决方案

#1

<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: 33px;" />
                </td>
            </tr>
            <tr>
                <td class="celebrationContent">
                    When is it:
                </td>
                <td class="style1">
                    <input type="text" id="Whenisit" name="Whenisit" 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>
    <script type="text/javascript">
    function submitform() {

        if (validateCaptach()) {
            var sData = $("#RegisterUserForm").serialize();
            $.ajax({
                type: "POST",
                url: "thankyou.php",
                data: sData,
                success: function (data) {
                    if (data == "SUCCESS") {
                        alert("sucess..");
                    } else {
                        alert("some error please type again...");
                    }
                }
            });
        }

        return false;
    }

    function validateCaptach() {
        var captchaval = $("#verificationcode").val();

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

    }

    </script>