event.preventDefault(); not working when submitting form

Question

I am trying to put the result from a submitted form in to a div instead of opening it inside a new window. The problem is that my event.preventDefault(); 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 contact-form-handler.php, which is the script file.

Here is the code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

CONTACT FORM:

<form class="form-container" id="contactForm" method="post" action="contact-form-handler.php">
<div class="form-title">Full Name:</div>
<input class="form-field" type="text" name="name" /><br />
<div class="form-title">Email Address:</div>
<input class="form-field" type="text" name="email" /><br />
<div class="form-title">Phone Number:</div>
<input class="form-field" type="text" name="phone" /><br />
<div class="form-title">Message:</div>
<textarea class="form-field" rows="8" cols="34" name="message"></textarea><br />
<div id="contactResponse"></div>
<div class="submit-container">
<button type="submit" class="submit-button">Send</button>
</div>
</form>

SCRIPT CODE:

<script type="text/javascript">
$("#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);
         });
    });
</script>

PHP CODE:

<?php 
$myemail = 'mymail@mail.com';//<-----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";  
    }

?>

So the problem is when I hit the submit button, instead of the result showing inside the #contactResponse div, it is showing inside new page of the script contact-form-handler.php

Any suggestions why this is not working?

Answer 1

Using <script type="text/javascript"> , your script will not work, replace <script type="text/javascript"> with <script language="javascript">, It will work correctly. But language="javascript" is deprecated in favor of type="text/javascript". keep in mind you put the code $(document).ready(function(){ //code to be implemented// });

Anyhow your script will work by replacing type="text/javascript" with language="javascript"

Answer 2

My best guess is that you are adding your #contactForm submit listener before the form is actually rendered. Try wrapping your jQuery in $(document).ready(function () {});

I don't see any other issues.