[提交表单时显示加载的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="[email protected]" 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);

        // Clear the form.
        $('#name').val('');
        $('#email').val('');
        $('#subject').val('');
        $('#message').val('');
      });
  });

});

#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="[email protected]" 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。随时问！！！！！！