大佬教程收集整理的这篇文章主要介绍了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()) {
以上是大佬教程为你收集整理的javascript-使用jquery和.submit捕获表单提交后清除表单 全部内容，希望文章能够帮你解决javascript-使用jquery和.submit捕获表单提交后清除表单 所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。