无法在jquery ajax回调函数中提交表单

时间:2012-07-26 16:30:11

标签: javascript ajax forms submit

我试图在使用ajax请求验证验证码后提交表单 - 如果验证验证码成功,我必须提交表单。

这是表格:

<form action="Feedback" method="post" name="contact_us" id="contact_us_form">
     <table id="contact_us_table" style="font-family: 'Muli', serif;font-weight:bold;margin-left: 26px;margin-top: 39px;">

     <tr>
     <td> </td>
     <td height="20px" style="color: red;font-size: 12px;" id="msg">  </td>
     </tr>
     <tr>
     <td><span style="color: red">*</span>Name  </td>
     <td> <input type="text" name="name" id="name" /> </td>
     </tr>

     <tr>
     <td><span style="color: red">*</span>Email  </td>
     <td> <input type="text" name="email" id="email" /> </td>
     </tr>


     <tr>
     <td width="100px;"><span style="color: red">*</span>Message  </td>
     <td> <textarea style="max-width:420px;width: 420px; height: 100;" name="message" id="message"></textarea></td>
     </tr>

     <tr>
     <td height="50px;"></td>
     <td>Human Verification.</td>
     </tr>




     <tr>
     <td><img src="<%=GlobalData.SERVER_ROOT+"simpleCaptcha.png"%>"></td>
     <td height="20px;"><input type='text' name='answer' id="answer" value=''> </td>
     </tr>

     <tr>
     <td></td>
     <td> <button class="button1" id="submit">Submit</button> </td>
     </tr>


     </table>
     </form>

这是javascript:

 $("#contact_us_form").submit(function(e){
             e.preventDefault();
            var email = $("#email").val(); 
            var name = $("#name").val(); 
            var message = $("#message").val();
            var answer = $("#answer").val();



            if(name == ""){
                   $("#name").focus();
                   $("#msg").html("Please enter your name");
                   return false;
                  }
            else if(email == ""){
               $("#email").focus();
               $("#msg").html("Please enter an email");
               return false;
              }
             else if(!isValidEmailAddress(email)){
               $("#email").focus();
               $("#msg").html("Email should be like : john@example.com");
               return false;
              }
             else if(message == ""){
                 $("#message").focus();
                   $("#msg").html("Please write your message");
                   return false;
                 }
             else if(answer == ""){
                 $("#answer").focus();
                   $("#msg").html("Enter what you see in image.");
                   return false;
                 }



             $.ajax({
                 type: "POST",
                 url: "CheckCaptcha",
                 data: {answer:answer}
             }).done(function(msg) {
                // alert(msg);

                 if(msg == "true"){
                    //$('#contact_us_form').submit();
                    //$('#contact_us_form').submit(); 
                       $("#contact_us_form").unbind('submit').submit();
                     //setTimeout(document.getElementById('contact_us_form').submit(), 10);
                 }
                 else{
                     $("#answer").focus();
                       $("#msg").html("Captcha Incorrect");
                       return false;
                     }
                 }).error(function(){

                 });



            });

你可以在javascript中看到:

if(msg == "true"){

                    //$('#contact_us_form').submit(); 
                       $("#contact_us_form").unbind('submit').submit();
                     //setTimeout(document.getElementById('contact_us_form').submit(), 10);
                 }

我尽我所能。但它不起作用。

他们有什么不对吗?

编辑::

如果我点击两次提交,则此代码有效。

2 个答案:

答案 0 :(得分:1)

正因为如此:

<button class="button1" id="submit">Submit</button>

永远不要使用'type'作为名称或ID

我使用submit作为ID。这就是代码无效的原因..

当我把它改成

<button class="button1" id="submit_button">Submit</button>

有效!

答案 1 :(得分:0)

尝试在没有参数的情况下取消绑定:

 $("#contact_us_form").unbind().submit();