捕获表单后清除表单，使用 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>

这是我的联系方式.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()) {

相关内容

最新更新

热门标签：