提交表单时显示加载 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="searchbbc1881@gmail.com" 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

好的，首先你可以使用 modal 并在其上添加 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="searchbbc1881@gmail.com" 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。随便问！！！！！！！！！