title: How do I call a jquery function on submitting a form?
body: <p>I have a form which is given below :</p>
  
  <pre><code> &lt;form method="post" id="contactForm" action=""&gt;
                  &lt;fieldset class="contactFieldset"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;label for="contactName" class="leftLabel"&gt;*Name:&lt;/label&gt;
                              &lt;input type="text" name="contactName" id="contactName" class="contactInput required" value="" /&gt;
  
                          &lt;/li&gt;
                          &lt;p&gt;&lt;/p&gt;
                          &lt;li&gt;
                              &lt;label for="email" class="leftLabel"&gt;*Email:&lt;/label&gt;
                              &lt;input type="text" id="email" name="email" class="contactInput email required" value="" /&gt;
                          &lt;/li&gt;
                        &lt;span class="simple-success"&gt;I'll be in  touch soon&lt;/span&gt;
                          &lt;li&gt;
                              &lt;label for="subject" class="leftLabel"&gt;*Subject:&lt;/label&gt;
                              &lt;input type="text" name="subject" id="subject" class="contactInput required" value="" /&gt;
                          &lt;/li&gt;
                          &lt;p&gt;&lt;/p&gt;
                          &lt;li&gt;
                              &lt;label for="message" class="leftLabel"&gt;Message:&lt;/label&gt;
                              &lt;textarea rows="10" cols="40" id="message" name="message" class="contactTextarea required"&gt;&lt;/textarea&gt;
  
                          &lt;/li&gt;
                         &lt;p&gt;&lt;/p&gt;
                          &lt;li&gt;
  
  
                              &lt;input type="image" src="images/submitbutton.png" alt="Submit button" name="submit_button" class="submit_button" id="submit_button"&gt;
  
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/fieldset&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>I am trying to extract the data from this form via jquery so that I can pass it on to the php file and send an email but the jquery function is not being called on clicking the button.The code is given below: </p>
  
  <pre><code>    $(function() {
    $('.error').hide();
    $('.simple-sucess').hide();
  
    $(".submit_button").click(function() {
  
  
  
  
  
          /*get the email value*/
  
          var email = $("input#email").val();
          var name = $("input#contactName").val();
          var subject = $("input#subject").val();
          var message=$("input#message").val();
      //  alert("email"+email);
  
  /* Check if the email is good or bad */
  
  var goodEmail = email.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..{2,2}))$)\b/gi);
      apos=email.indexOf("@");dotpos = email.lastIndexOf(".");lastpos=email.length-1;
      var badEmail    = (apos&lt;1 || dotpos-apos&lt;2 || lastpos-dotpos&lt;2);
  
  /*If the email is bad ,display the error message*/
  
  if (email=="" || !goodEmail || badEmail) {
  
          $("email").focus();
        return false;
      }
  
  
          var dataString = 'email='+ email + '\n Name='+ name+ '\n Subject='+ subject+ '\n message='+ message;
          alert (dataString);
  
          $.ajax({
        type: "POST",
        url: "mai.php",
        data: dataString,
        success: function() {
          $('.simple-sucess').fadeIn(100).show();
          $('.contact_form').fadeOut(100).hide();
          $('.simple_error').fadeOut(100).hide();
  
  
        }
       });
      return false;
      });
  });
  </code></pre>
  
  <p>Any ideas on what I might be doing wrong ?</p>
  
  <p>Thanks</p>