title: event.preventDefault(); not working when submitting form
body: <p>I am trying to put the result from a submitted form in to a <code>div</code> instead of opening it inside a new window. The problem is that my <code>event.preventDefault();</code> doesn't seem to be working and I don't understand why. The result, after I hit the submit button is always to open the <code>contact-form-handler.php</code>, which is the script file.</p>
  
  <p>Here is the code: </p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>CONTACT FORM:</strong> </p>
  
  <pre><code>&lt;form class="form-container" id="contactForm" method="post" action="contact-form-handler.php"&gt;
  &lt;div class="form-title"&gt;Full Name:&lt;/div&gt;
  &lt;input class="form-field" type="text" name="name" /&gt;&lt;br /&gt;
  &lt;div class="form-title"&gt;Email Address:&lt;/div&gt;
  &lt;input class="form-field" type="text" name="email" /&gt;&lt;br /&gt;
  &lt;div class="form-title"&gt;Phone Number:&lt;/div&gt;
  &lt;input class="form-field" type="text" name="phone" /&gt;&lt;br /&gt;
  &lt;div class="form-title"&gt;Message:&lt;/div&gt;
  &lt;textarea class="form-field" rows="8" cols="34" name="message"&gt;&lt;/textarea&gt;&lt;br /&gt;
  &lt;div id="contactResponse"&gt;&lt;/div&gt;
  &lt;div class="submit-container"&gt;
  &lt;button type="submit" class="submit-button"&gt;Send&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>SCRIPT CODE:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $("#contactForm").submit(function(event) 
       {
           /* stop form from submitting normally */
           event.preventDefault();
  
           /* get some values from elements on the page: */
           var $form = $( this ),
               $submit = $form.find( 'button[type="submit"]' ),
               name_value = $form.find( 'input[name="name"]' ).val(),
               email_value = $form.find( 'input[name="email"]' ).val(),
               phone_value = $form.find( 'input[name="phone"]' ).val(),
               message_value = $form.find( 'textarea[name="message"]' ).val();
  
  
           /* Send the data using post */
           var posting = $.post( "contact-form-handler.php", { 
                             name: name_value, 
                             email: email_value, 
                             phone: phone_value, 
                             message: message_value 
                         });
  
           posting.done(function( data )
           {
               /* Put the results in a div */
               $( "#contactResponse" ).html(data);
  
               /* Change the button text. */
               $submit.text('Sent, Thank you');
  
               /* Disable the button. */
               $submit.attr("disabled", true);
           });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>PHP CODE:</strong> </p>
  
  <pre><code>&lt;?php 
  $myemail = 'mymail@mail.com';//&lt;-----Put Your email address here.
  $name = $_POST['name']; 
  $phone = $_POST['phone'];
  $email_address = $_POST['email']; 
  $message = $_POST['message']; 
  
  
      $to = $myemail; 
      $email_subject = "Contact form submission: $name";
      $email_body = "Contact Form Emocool Website ".
      " Here are the details:\n Name: $name \n Telefono: $phone \n Email: $email_address \n Message \n $message"; 
  
      $headers = "From: $myemail\n"; 
      $headers .= "Reply-To: $email_address";
  
      if(mail($to,$email_subject,$email_body,$headers))
      {
      echo "Thank you for contacting us";
      }
      //redirect to the 'thank you' page
      else
      {
      echo "Sorry, there has been an error";  
      }
  
  ?&gt;
  </code></pre>
  
  <p>So the problem is when I hit the submit button, instead of the result showing inside the <code>#contactResponse</code> <code>div</code>, it is showing inside new page of the script <code>contact-form-handler.php</code></p>
  
  <p>Any suggestions why this is not working? </p>