Как предотвратить появление файла PHP после отправки формы контакта?

Question

Прямо сейчас, всякий раз, когда я нажимаю кнопку отправки в форме контакта на своем веб-сайте, она приводит меня на страницу www.mysite.com/php/function/email.php, вместо того, чтобы запускать email.php в фоновом режиме, например Я хочу этого.

Сайт должен разрешить вам отправить форму контакта, затем кнопка погаснет и исчезнет в «Ваше сообщение отправлено!», А затем погаснет кнопка.

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 get back to you soon!</p> 
     <p id="error" style="display:none">Please fill in all the fields and try again!</p> 

JS:

$(document).ready(function(){ 
    $('#send_message').click(function(e){ 

     //Stop form submission & check the validation 
     e.preventDefault(); 

     // Variable declaration 
     var name = $('#name').val(); 
     var email = $('#email').val(); 
     var subject = $('#subject').val(); 
     var message = $('#message').val(); 

     // Disable submit button just after the form processed 1st time successfully. 
     $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' }); 

     /* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/ 
     $.post("email.php", $("#contact_form").serialize(),function(result){ 
      //Check the result set from email.php file. 
      if(result == 'sent'){ 
       //If the email is sent successfully, remove the submit button 
       $('#submit').remove(); 
       //Display the success message 
       $('#success').fadeIn(500); 
      }else{ 
       //Display the error message 
       $('#error').fadeIn(500); 
       // Enable the submit button again 
       $('#submit').removeAttr('disabled').attr('value', 'Send The 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'; 
} 
} 
?> 

Answer 1

Событие .click()<input type="submit"> на самом деле не является причиной перенаправления. Вместо этого он становится .submit() event на <form>.

Вы можете e.stopPropagation(), так что он не доходит до <form>.

//Stop form submission & check the validation 
e.stopPropagation(); 

Или preventDefault() из <form> «s .submit().

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

Примечание: Вы должны также рассмотреть вопрос о переносе кода в .submit() обработчика, поскольку большинство браузеров поддерживают другие способы представления <form>, чем на самом деле нажав <input type="submit">.

Answer 2

Проблема заключается в том, что вы ищете событий щелчка на #send_message но ваш су Кнопка bmit имеет идентификатор submit. Так что событие click никогда не произойдет.