Невозможно создать простой php-Ajax-рабочий

-5

Я хочу создать простую форму контакта, используя Jquery с вызовом ajax и PHP. Но это не работает, и я не понимаю, почему. Вы можете считать, что нет ошибки имени id или класса.

Мой Javascript

 jQuery('#contacter').click(function () {       

var postdata = $('.contact-form form').serialize();

$.ajax({
type: 'POST',
url: 'contact.php',
data: postdata,
success: function () {

$('.contact-form form').fadeOut('fast', function () {
$('.contact-form').append('<p>Thanks for contacting us! We will get back to you very soon.</p>');

});

}
});

});

Мой PHP

<?php

// Enter the email where you want to receive the message
$emailTo = 'example@gmail.com';

$clientEmail = addslashes(trim($_POST['email']));
$subject = addslashes(trim($_POST['subject']));
$message = addslashes(trim($_POST['message']));
$antispam = addslashes(trim($_POST['antispam']));

$headers = "From: " . $clientEmail . " <" . $clientEmail . ">" . "\r\n" . "Reply-To: " . $clientEmail;
mail($emailTo, $subject , $message, $headers);

?>

Мой сайт обновляется без отправки почты. Я уже тестировал свой сервер с помощью простой почты(), и он отлично работает: никаких проблем на стороне сервера.

спросил(а) 2021-01-21T14:17:45+03:00 5 месяцев назад
1
Решение
77

Мне кажется, проблема связана с обратной передачей, когда форма отправляется. Поскольку вы используете событие click на кнопке (предположение), и его поведение по умолчанию заключается в том, чтобы отправить форму, и это приведет к обратной передаче.

Поскольку вы используете ajax для отправки значений в бэкэнд, поэтому вам необходимо использовать event.preventDefault() чтобы остановить представление формы/поведение по умолчанию.

Вы должны остановить событие с помощью event.preventDefault():

 jQuery('#contacter').click(function (e) {  // <-----pass e for event here    
e.preventDefault(); // and stop it here

и если вы работаете с элементом form тогда лучше пойти с submit события:

jQuery('.contact-form form').submit(function(e) { // e in the args
e.preventDefault(); // stop the submission here.
var postdata = $(this).serialize();
$.ajax({
type: 'POST',
url: 'contact.php',
data: postdata,
success: function() {
$('.contact-form form').fadeOut('fast', function() {
$('.contact-form').append('<p>Thanks for contacting us! We will get back to you very soon.</p>');
});
}
});
});

ответил(а) 2021-01-21T14:17:45+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема