Сложная контактная форма Отправить (ajax help)
Как я могу запустить эту контактную форму без перезагрузки или изменения страницы при отправке? Мне сказали использовать 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";
}
}
?>
Решение
Попробуйте приведенные ниже коды =)
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);
?>
Другие решения
Других решений пока нет …
detector