Question

I am trying to submit a form after validating captcha using an ajax request – if captcha is validated successfully , i have to submit the form.

here is the form :

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

and here is the 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 : [e-mail]");
               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(){

                 });



            });

You can see in javascript :

if(msg == "true"){

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

i have tried all i can . but it didn’t work.

is their anything wrong ?

EDIT ::

This code works if i click submit two times..

Answer 1

It’s just because of this :

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

NEVER USE ‘type’ as a name or id

i was using submit as an id. that is why the code was not working..

when i changed it to

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

it worked !