javascript - How do I prevent PHP file from popping up after submitting contact form? -

right now, whenever click submit button on contact form on website, brings me page www.mysite.com/php/function/email.php, rather running email.php in background want to.

the website supposed allow submit contact form, button fade away , fade in "your message has been sent!", fade button.

html:

<form name="contact form" id='contact_form' method="post" action="php/function/email.php"> <div class="row half">     <div class="6u">         <input name="name" placeholder="name" type="text" class="text" />     </div>     <div class="6u">         <input name="email" placeholder="email" type="email" class="text" />     </div> </div> <div class="row half">     <div class="12u">         <textarea name="message" placeholder="message"></textarea>     </div> </div> <div class="row half">     <div class="12u">         <input id="submit" name="submit" type="submit" value="send message" class="button button-icon icon icon-envelope" />     </div> </div> <p id="success" style="display:none">your message has been sent! i'll soon!</p>         <p id="error" style="display:none">please fill in fields , try again!</p> 

js:

 $(document).ready(function(){     $('#send_message').click(function(e){          //stop form submission & check validation         e.preventdefault();          // variable declaration         var name = $('#name').val();         var email = $('#email').val();         var subject = $('#subject').val();         var message = $('#message').val();         // disable submit button after form processed 1st time successfully.         $('#send_message').attr({'disabled' : 'true', 'value' : 'sending...' });          /* post ajax function of jquery data submission of form form sends values email.php*/         $.post("email.php", $("#contact_form").serialize(),function(result){             //check result set email.php file.             if(result == 'sent'){                 //if email sent successfully, remove submit button                  $('#submit').remove();                 //display success message                 $('#success').fadein(500);             }else{                 //display error message                 $('#error').fadein(500);                 // enable submit button again                 $('#submit').removeattr('disabled').attr('value', 'send message');             }         });     } });     }; 

php:

<?php $name = $_post['name']; $email = $_post['email']; $message = $_post['message']; $from = 'from: example';  $to = 'example@gmail.com';  $subject = 'example contact form';  $body = " from: $name email: $email --------------- message: \n $message"; if ($_post['submit']) {                   if (mail ($to, $subject, $body, $from)) {      echo 'sent'; } else {      echo 'failed'; } } ?> 

the .click() event of <input type="submit"> isn't causes redirection. instead becomes .submit() event @ <form>.

you can either e.stoppropagation() doesn't reach <form>.

//stop form submission & check validation e.stoppropagation(); 

or preventdefault() of <form>'s .submit().

$('#contact_form').submit(function (e) {     e.preventdefault(); }); 

note: should consider moving code .submit() handler browsers support other ways of submitting <form> clicking <input type="submit">.