javascript-使用jquery和.submit捕获表单提交后清除表单

经过大量研究,提交表单后,我仍然无法清除表单并显示“已提交邮件”消息.

<!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捕获表单提交后清除表单

猜你在找的jQuery相关文章