表单提交后停止页面刷新
表单提交后停止页面刷新
提问于 2017-08-17 12:57:04
我已经搜索了很多其他的线程，我看不出我做错了什么，我试图将表单值发送到php文件作为电子邮件发送，但是页面总是刷新。我在ajax调用之前和之后都尝试过使用event.preventDefault并返回false，但似乎没有一种方法有效。我在这里缺少的是我的密码。
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="richard.thomson45@gmail.com" 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 = "test@hotmail.co.uk";
$emailFrom = "contact@test.co.uk";
$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");
}
}
?>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-17 13:02:51
从理论上说，阻止提交按钮的默认设置应该停止表单提交--但是：
- 输入按钮没有
submit事件。如果你听click的话，那会起作用，但部分原因是. - 可能还有其他干扰此操作的混杂因素，即导致表单提交的其他击键或用户交互。
您应该侦听从表单中触发的onsubmit事件，而不是从submit按钮发出的事件。表单的提交事件是在提交表单时触发的明确事件:无论是由<button>、<input type="submit">或甚至通过编程方式触发的事件(如$form.trigger('submit') )。你可以给你的表格一个ID，即：
<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>元素，那么使用jQuery的DOM遍历方法也可以工作，即：
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 <button></button>
<br />
<a href="#" id="submitProgramatically">Submit programatically using JS</a>
</form>
注意:如果直接在DOM节点：onsubmit上调用submit()方法，则可以绕过jQuery的$('form')[0].submit()事件处理程序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45735757
复制相关文章
相似问题
腾讯云开发者
