Clear form after capturing a form submit with jquery and .submit

Question

After lot of research, I still can't clear my form and show a "Message submitted" message, after submit my form.

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

$(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(). 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. Your page is refreshing when the form is submitted so your message doesn't ever show up.

Once you add e.preventDefault()

Then change this:

if (!e.isDefaultPrevented()) {

to this:

if (e.isDefaultPrevented()) {

Clear form after capturing a form submit with jquery and .submit

Question

1 answers

solution1
2 2019-01-25 02:05:07

Clear form after capturing a form submit with jquery and .submit

Question

1 answers

solution1 2 2019-01-25 02:05:07

solution1
2 2019-01-25 02:05:07