使用jquery和.submit捕獲表單提交后清除表單

Question

經過大量的研究，我仍然無法在提交表格后清除表格並顯示“提交消息”的消息。

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文件中使用success函數，我嘗試了不同的方法，如trigger（），reset（）。 點擊提交按鈕后，會發送信息，但發送數據時不會顯示成功消息。

Answer 1

有沒有理由你不只是這樣做？

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

你是專門檢查以確保它沒有完成，然后做你的ajax調用，這是沒有意義的。 提交表單時，您的頁面會刷新，因此您的郵件不會顯示。

添加e.preventDefault()

然后改變這個：

if (!e.isDefaultPrevented()) {

對此：

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