经过大量研究，我仍然无法在提交表单后清除表单并显示“消息已提交”消息。
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<!--some code -->
</head>
<body id="page-top">
<!-- Navigation -->
</nav>
<header class="masthead text-center text-white d-flex">
<!-- SOME CODE -->
</header>
<!-- Formulario de Contacto -->
<section id="contact" data-delimiter="1">
<div class="row">
<div class="col-lg-6">
<h3 class="heading h3 mb-4">Escríbanos</h3>
<form class="needs-validation" id="contact-form" method="POST" action="contact.php" role="form" novalidate>
<div class="messages"></div>
<div class="row">
<div class="col-12">
<div class="form-group">
<input name="name" class="form-control formu" type="text" id="name" placeholder="Nombre" maxlength="50" required data-error="Es necesario un nombre">
<div class="invalid-feedback">Es necesario un nombre.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<input name="email" class="form-control formu" type="email" id="email" placeholder="Correo electrónico" required data-error="Es necesario un correo electrónico">
<div class="invalid-feedback">Es necesario un correo electrónico.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<textarea name="message" class="form-control formu" rows="5" id="message" placeholder="Su mensaje" required></textarea>
<div class="invalid-feedback">Es necesario su mensaje.
</div>
</div>
</div>
</div>
<div class="mt-4">
<button type="submit" value="Enviar" class="btn btn-primary px-4" id="btn_enviar">Enviar</button>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
这是我的 contact.js
$(function () {
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
$('#contact-form')[0].reset();
//$("#contact-form").trigger("reset");
//$("#contact-form").get(0).reset();
}
});
return false;
}
})
});
我对此真的很困惑。它应该与我的 .js 文件中的 success 函数一起使用，并且我尝试了不同的方法，例如触发器()，重置()。 点击提交按钮后，信息已发送，但发送数据时未显示成功消息。
最佳答案
您有什么理由不这样做吗？
$('#contact-form').on('submit', function (e) {
e.preventDefault();
您专门检查以确保它尚未完成，然后进行 ajax 调用，但这实际上没有意义。提交表单后，您的页面会刷新，因此您的消息永远不会显示。
添加e.preventDefault()后
然后更改此:
if (!e.isDefaultPrevented()) {
对此:
if (e.isDefaultPrevented()) {
关于javascript - 使用 jquery 和 .submit 捕获表单提交后清除表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54357980/