javascript - 使用 jquery 和 .submit 捕获表单提交后清除表单
问题描述
经过大量研究,提交表单后,我仍然无法清除表单并显示“已提交消息”消息。
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 文件中的成功函数一起使用,并且我尝试了不同的方法,例如 trigger()、reset()。点击提交按钮后,发送信息,但发送数据时不显示成功消息。
解决方案
你有理由不这样做吗?
$('#contact-form').on('submit', function (e) {
e.preventDefault();
您正在专门检查以确保它尚未完成,然后进行您的 ajax 调用,这实际上没有任何意义。提交表单后,您的页面会刷新,因此您的消息永远不会出现。
一旦你添加e.preventDefault()
然后改变这个:
if (!e.isDefaultPrevented()) {
对此:
if (e.isDefaultPrevented()) {
推荐阅读
- visual-studio-code - VS 代码扩展在编辑其 JS 后不反映更改
- html - 为什么 w3 验证器说“元素
- 不允许作为元素的子元素
- 在这种情况下”?
- logging - Xamarin 表单中的多目标和使用 Microsoft.Extensions.Logging
- sql - 如何处理多列上的重复项?
- ssl - 基于 libcurl 的 ftp 客户端程序 tls 会话超时到 vsftpd 服务器。但是 curl 在同一服务器端口上工作正常
- amazon-ec2 - 不能使用 boto3 发出超过一种类型的现场请求
- flutter - 按集团管理全局事件
- java - 避免任务调度程序在选择查询中先前获取的列数据
- javascript - 如何修复节点中的猫鼬数组
- python - 为什么我的不和谐机器人帮助命令不起作用?