提交表单时显示加载 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() {&nbsp; // Get the form.&nbsp; var form = $('#ajax-contact');&nbsp; // Get the messages div.&nbsp; var formMessages = $('#form-messages');&nbsp; // Set up an event listener for the contact form.&nbsp; $(form).submit(function(e) {&nbsp; &nbsp; // Stop the browser from submitting the form.&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; // Serialize the form data.&nbsp; &nbsp; var formData = $(form).serialize();&nbsp; &nbsp; // Submit the form using AJAX.&nbsp; &nbsp; &nbsp; var result = $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: $(form).attr('action'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: formData&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // Here, you have to add, what you want to do right after data is sent.&nbsp; &nbsp; &nbsp; $("#modal").css("display", "flex");&nbsp; &nbsp; &nbsp; // Overflow of main body to hidden&nbsp; &nbsp; &nbsp; $("body").css("overflow", "hidden");&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; result.done(function(response) {&nbsp; &nbsp; &nbsp; &nbsp; // Now, you can hide modal or loading gif&nbsp; &nbsp; &nbsp; &nbsp; $("#modal").css("display", "none");&nbsp; &nbsp; &nbsp; &nbsp; // Overflow of main body to hidden&nbsp; &nbsp; &nbsp; &nbsp; $("body").css("overflow", "auto");&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // Make sure that the formMessages div has the 'success' class.&nbsp; &nbsp; &nbsp; &nbsp; $(formMessages).removeClass('error');&nbsp; &nbsp; &nbsp; &nbsp; $(formMessages).addClass('success');&nbsp; &nbsp; &nbsp; &nbsp; // Set the message text.&nbsp; &nbsp; &nbsp; &nbsp; $(formMessages).text(response);&nbsp; &nbsp; &nbsp; &nbsp; // Reset form at once instead&nbsp; &nbsp; &nbsp; &nbsp; $("#ajax-contact").reset();&nbsp; &nbsp; &nbsp; });&nbsp; });});#modal {&nbsp; display: none;&nbsp; position: absolute;&nbsp; top: 0px;&nbsp; left: 0px;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; background-color: rgba(0, 0, 0, 0.6);&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; 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">&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="text" class="form-control" placeholder="Name" id="name" name="name" value="Sagar Rawal" required>&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="email" class="form-control" placeholder="Enter Email" id="email" value="[e-mail]" name="email" required>&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <textarea class="form-control" placeholder="Message" id="message" name="message" required>This is message </textarea>&nbsp; </div>&nbsp; <button type="submit" name="submit" class="mu-send-msg-btn"><span>SUBMIT</span></button></form><!-- My modal for modal --><div id="modal">&nbsp; &nbsp; <img width=200 src="https://thumbs.gfycat.com/BogusEmptyBrontosaurus-small.gif" alt="Loading-gif"/></div>在js中，我将结果添加为ajax对象。并且，数据发送后，我们立即显示 gif 文件。并且，在我们给出数据后，我们将再次隐藏 gif div。随意询问！！！！！！！