提交表单时显示加载 GIF

Question

我有一些输入的表格。我想在提交表单时显示加载 gif 并在提交表单时隐藏。我使用 php 发送详细信息，一旦提交，它就会显示响应，但是在提交表单时，我想将 gif 显示为加载屏幕，并在完成后隐藏。$(function() {  // Get the form.  var form = $('#ajax-contact');  // Get the messages div.  var formMessages = $('#form-messages');  // Set up an event listener for the contact form.  $(form).submit(function(e) {    // Stop the browser from submitting the form.    e.preventDefault();    // Serialize the form data.    var formData = $(form).serialize();    // Submit the form using AJAX.    $.ajax({        type: 'POST',        url: $(form).attr('action'),        data: formData      })      .done(function(response) {        // Make sure that the formMessages div has the 'success' class.        $(formMessages).removeClass('error');        $(formMessages).addClass('success');        // Set the message text.        $(formMessages).text(response);        // Clear the form.        $('#name').val('');        $('#email').val('');        $('#subject').val('');        $('#message').val('');      });  });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="ajax-contact" method="post" action="mailer.php" class="mu-contact-form">  <div class="form-group">    <input type="text" class="form-control" placeholder="Name" id="name" name="name" value="Sagar Rawal" required>  </div>  <div class="form-group">    <input type="email" class="form-control" placeholder="Enter Email" id="email" value="[e-mail]" name="email" required>  </div>  <div class="form-group">    <textarea class="form-control" placeholder="Message" id="message" name="message" required>This is message </textarea>  </div>  <button type="submit" name="submit" class="mu-send-msg-btn"><span>SUBMIT</span></button></form>

Answer 1

好的，首先你可以使用模态并在其上添加 gif 文件。或者您可以简单地将图像添加到要添加的位置。在这里，我将使用模态。

$(function() {

  // Get the form.

  var form = $('#ajax-contact');

  // Get the messages div.

  var formMessages = $('#form-messages');

  // Set up an event listener for the contact form.

  $(form).submit(function(e) {

    // Stop the browser from submitting the form.

    e.preventDefault();

    // Serialize the form data.

    var formData = $(form).serialize();

    // Submit the form using AJAX.

      var result = $.ajax({

                    type: 'POST',

                    url: $(form).attr('action'),

                    data: formData

                  });

      

      // Here, you have to add, what you want to do right after data is sent.

      $("#modal").css("display", "flex");

      // Overflow of main body to hidden

      $("body").css("overflow", "hidden");

      

      result.done(function(response) {

        // Now, you can hide modal or loading gif

        $("#modal").css("display", "none");

        // Overflow of main body to hidden

        $("body").css("overflow", "auto");

      

        // Make sure that the formMessages div has the 'success' class.

        $(formMessages).removeClass('error');

        $(formMessages).addClass('success');

        // Set the message text.

        $(formMessages).text(response);

        // Reset form at once instead

        $("#ajax-contact").reset();

      });

  });

});

#modal {

  display: none;

  position: absolute;

  top: 0px;

  left: 0px;

  height: 100%;

  width: 100%;

  background-color: rgba(0, 0, 0, 0.6);

  justify-content: center;

  align-items: center;

  overflow: hidden;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="ajax-contact" method="post" action="mailer.php" class="mu-contact-form">

  <div class="form-group">

    <input type="text" class="form-control" placeholder="Name" id="name" name="name" value="Sagar Rawal" required>

  </div>

  <div class="form-group">

    <input type="email" class="form-control" placeholder="Enter Email" id="email" value="[e-mail]" name="email" required>

  </div>

  <div class="form-group">

    <textarea class="form-control" placeholder="Message" id="message" name="message" required>This is message </textarea>

  </div>

  <button type="submit" name="submit" class="mu-send-msg-btn"><span>SUBMIT</span></button>

</form>

<!-- My modal for modal -->

<div id="modal">

    <img width=200 src="https://thumbs.gfycat.com/BogusEmptyBrontosaurus-small.gif" alt="Loading-gif"/>

</div>

在js中，我将结果添加为ajax对象。并且，数据发送后，我们立即显示 gif 文件。并且，在我们给出数据后，我们将再次隐藏 gif div。随意询问！！！！！！！