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

Question

After lot of research, I still can't clear my form and show a "Message submitted" message, after submit my form. 经过大量的研究，我仍然无法在提交表格后清除表格并显示“提交消息”的消息。

HTML: 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>

And this is my contact.js 这是我的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;
        }            
    })
});

I am really confused with this. 我真的很困惑。 It supposed to work with the success function in my .js file and I've tried different methods like trigger(), reset(). 它应该在我的.js文件中使用success函数，我尝试了不同的方法，如trigger（），reset（）。 After hitting submit button, the information is sent but the success message is not displayed when the data is sent. 点击提交按钮后，会发送信息，但发送数据时不会显示成功消息。

Answer 1

Is there a reason you're not just doing this? 有没有理由你不只是这样做？

$('#contact-form').on('submit', function (e) {  
    e.preventDefault();

You're specifically checking to make sure it hasn't been done and then doing your ajax call and that doesn't really make sense. 你是专门检查以确保它没有完成，然后做你的ajax调用，这是没有意义的。 Your page is refreshing when the form is submitted so your message doesn't ever show up. 提交表单时，您的页面会刷新，因此您的邮件不会显示。

Once you add e.preventDefault() 添加e.preventDefault()

Then change this: 然后改变这个：

if (!e.isDefaultPrevented()) {

to this: 对此：

if (e.isDefaultPrevented()) {

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

问题描述

1 个解决方案

解决方案1
2 2019-01-25 02:05:07

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

问题描述

1 个解决方案

解决方案1 2 2019-01-25 02:05:07

解决方案1
2 2019-01-25 02:05:07