Остановить обновление страницы после отправки формы

Question

Остановить обновление страницы после отправки формы

Я искал много других тем об этом, и я не вижу, что я делаю неправильно, я пытаюсь отправить значения формы в php-файл для отправки по электронной почте, однако страницы всегда обновляются. Я попытался использовать event.preventDefault и вернуть false как до, так и после моего вызова ajax, но ни один из них не работает. Что я здесь упускаю, так это мой код.

HTML

<form method="post" name="registerForm" class="form">
<label for="fullName" class="form__fullname form__label">Full Name</label>

<input type="text" name="fullName" placeholder="Richard Thomson" maxlength="40" tabindex="1" pattern="^[a-zA-Z\s]*$" class="form__input" id="name" required>

<label for="email" class="form__email form__label">Email</label>

<input type="email" name="email"  placeholder="[email protected]" tabindex="2" class="form__input" id="email" required>

<label for="telephone" class="form__tel form__label">Phone</label>

<input type="tel" name="telephone" placeholder="07915834998" tabindex="3" pattern="[0-9]{11}" maxlength="11" class="form__input" id="telephone" required>

<input type="submit" value="Submit" name="submit" class="form__submit" id="submit">
</form>

JS

var fullName,
telephone,
email,
submitButton = $("#submit"),
formData;

submitButton.submit(function (event) {
// event.preventDefault();

fullName = $("#name").val();
telephone = $("#telephone").val();
email = $("#email").val();
formData = {
'name': fullName,
'email': email,
'telephone': telephone
};

$.ajax({
type: 'POST',
url: 'email.php',
data: formData,
dataType: 'json'
})
.done(function (data) {
console.log(data);
})
.fail(function () {
console.log("not working");
});

return false;
});

PHP

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['telephone'])) {

if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$email = $_POST['email'];
}

if (preg_match("/^[a-zA-Z\s]*$/", $_POST['fullName'])) {
$fullName = $_POST['fullName'];
}

if (preg_match("/[0-9]{11}/", $_POST['telephone'])) {
$telephone = $_POST['telephone'];
}

$telephone = substr_replace(substr_replace($telephone," ",3,0)," ",8,0);

$emailTo = "[email protected]";
$emailFrom = "[email protected]";
$subject = "I would like to know more about test";
$message = "Name:" . " " . $fullName . "\r\n\r\n";
$message .= "Email:" . " " . $email . "\r\n\r\n";
$message .= "Telephone:" . " " . $telephone;

$headers = "From: $emailFrom \r\n";
$headers .= 'Content-Type: text/plain; charset=utf-8';
$headers .= "Reply-To: $email \r\n";

$success = mail($emailTo, $subject, $message, $headers);

} else {
echo("Please fill all necessary fields");
}
}
?>

0

ajax forms jquery php preventdefault

Решение

По вопросам рекламы [email protected]

Accepted Answer

Предотвращение использования кнопки «Отправить» по умолчанию теоретически должно остановить отправку формы, но:

здесь нет submit событие для кнопки ввода. Если вы слушаете click, это будет работать, но только частично, потому что …
Могут быть и другие мешающие факторы, которые мешают этому, то есть другие нажатия клавиш или взаимодействия с пользователем, которые вызывают отправку формы.

Вы должны слушать onsubmit событие запускается из формы вместо события, отправляемого кнопкой отправки. Событие отправки формы — это определенное событие, которое вызывается при отправке формы: будь то <button>, <input type="submit">или даже программно, такие как $form.trigger('submit'), Вы можете дать своей форме удостоверение личности, т.е.

<form method="post" name="registerForm" class="form" id="registrationForm">

А затем просто выполните ту же логику в onsubmit Перезвоните:

$('#registrationForm').on('submit', function(e) {
// Prevent form submission by the browser
e.preventDefault();

// Rest of the logic
});

Если вы не можете изменить DOM так, чтобы вы могли определить <form> element, использующий методы обхода DOM в jQuery, также будет работать, т.е.

var $form = submitButton.closest('form');
$form.on('submit', function(e) {
// Prevent form submission by the browser
e.preventDefault();

// Rest of the logic
});

Чтобы проиллюстрировать мое утверждение о том, что событие отправки формы служит «зонтиком», охватывающим все события отправки, независимо от того, как они инициируются, обратитесь к примеру, который я привел ниже:

$(function() {
$('#form').on('submit', function(e) {
console.log('Form submission captured. It is triggered by: ', document.activeElement);
//e.preventDefault();
});

$('#submitInput').on('submit', function(e) {
console.log('Triggering submit event from <input>');
});

$('#submitButton').on('click', function() {
console.log('Triggering submit event from <button type="submit" />');
});

$('#submitProgramatically').on('click', function() {
console.log('Triggering submit event using JS only');
$('#form').trigger('submit');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="#">
<input type="text" placeholder="Just another text field" />
<br />
<input type="submit" value="Submit using an <input>" id="submitInput" />
<br />
<button id="submitButton">Submit using a &lt;button&gt;</button>
<br />
<a href="#" id="submitProgramatically">Submit programatically using JS</a>
</form>

3

Другие решения

Других решений пока нет …

Источник