2013-07-02 168 views
0

我有一个联系我们表单与captcha。我提交按钮点击我需要执行一个服务器端验证码验证使用第一个AJAX请求,如果成功,然后我打电话给第二个AJAX/Jquery/php发送联系我们的邮件。基于第一个AJAX请求调用另一个jQuery/AJAX/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> 
+0

'validateCaptach()'没有'return'语句。从'success'函数返回不会从'validateCaptach'返回。 – Barmar

+0

我也试过这种方式..我们需要分配一个变量,在返回值将被分配和返回..请正确。 – user601140

+0

这不是我在答案中显示的内容吗? – Barmar

回答

1

你没有从validateCaptach()返回任何东西。您从AJAX回调函数返回truefalse,但这些值不会在任何位置。

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; 
    } 
} 
+0

是的Barmar,我只是更新了代码。尽管如此,它只显示唯一的警报“captchacheck成功”的消息..请 – user601140

+0

我不知道为什么。对不起,但我没有太多使用同步'.ajax()'的经验,也许它不会像我想象的那样工作。你最好使用链接回调的答案之一,而不是试图同步返回值。 – Barmar

+0

非常感谢它的工作。哦,我的上帝,你节省了我的时间。谢谢罗伯茨。 – user601140

1

您还没有返回值从你的validateCaptach。来自success事件的返回值不会以您处理代码的方式返回给调用函数。所以为了让你获得所需的输出。您必须在ajax致电的success事件中拨打第二个电话。

例如

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

这将是最好的办法。

+0

他有'async:false',所以它不是异步的。 – Barmar

+0

谢谢更正。 : - ] – DevZer0

0

我不明白你为什么使用这两个AJAX请求。这并不意味着。

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

0

当你与异步调用的工作,该函数的AJAX调用之前validateCaptcha完成完成。您需要在第一个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>