Сложное Контактный формуляр Отправить (АЯКС помощь)

Question

Как я могу запустить эту контактную форму без перезагрузки или изменения страницы на представить? Мне сказали использовать ajax, но я не знаю, с чего начать.

Я хотел бы иметь возможность вывода изображения ('успешно отправлено! Спасибо.) На моем index.html внутри DIV, например.

<?php if (isset($_POST["contact"])){ 

$to = 'contact@example.com';  //Contact Email 

$from = $_POST["email"]; 
$name = $_POST["name"]; 
$message = $_POST["message"]; 

// subject 
$subject = 'New message from '.$name; 


// To send HTML mail, the Content-type header must be set 
$headers = 'MIME-Version: 1.0' . "\r\n"; 
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; 

// Additional headers 
$headers .= 'To: ' .$to. "\r\n"; 
$headers .= 'From: '.$from . "\r\n"; 

// Mail it 
if(mail($to, $subject, $message, $headers)){ 
    echo "Successfully sent! Thank you."; 
} else { 
    echo "Oops! Failed to send your message"; 
} 

} 

?> 

Answer 1

Попробуйте следующие коды =)

HTML

<form id="contactform" name="contactform" method="post" action="email.php"> 
<div> 
    <input type="text" name="name"> 
</div> 
<div> 
    <input type="email" name="email"> 
</div> 
<div> 
    <input type="text" name="subject"> 
</div> 
<div> 
    <textarea name="message"></textarea> 
</div> 
    <button type="submit"> 
     Send Message 
    </button> 
</form> 

Аякса

var form = $('#contactform'); 
form.submit(function(event){ 
    event.preventDefault(); 
    var form_status = $('<div></div>'); 
    $.ajax({ 
     type:"post", 
     url: $(this).attr('action'), 
     data: $(this).serialize(), 
     beforeSend: function(){ 
      form.prepend(form_status.html('<p>Sending</p>').fadeIn()); 
     } 
    }).done(function(data){ 
     form_status.html('<p>Done</p>').delay(3000).fadeOut(); 
    }); 
}); 

email.php

<?php 

$to = 'contact@example.com';  //Contact Email 

$from = $_POST["email"]; 
$name = $_POST["name"]; 
$message = $_POST["message"]; 

// subject 
$subject = 'New message from '.$name; 


// To send HTML mail, the Content-type header must be set 
$headers = 'MIME-Version: 1.0' . "\r\n"; 
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; 

// Additional headers 
$headers .= 'To: ' .$to. "\r\n"; 
$headers .= 'From: '.$from . "\r\n"; 

// Mail it 
mail($to, $subject, $message, $headers); 

?>