CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Sagar Rawal
Sagar Rawal

Reputation: 399

Show loading GIF when submitting form

I have form which has some inputs. I would like to show loading gif while submitting the form and hide when form is submitted. I sent details using php and once submitted it shows response, but when submitting form, I would like to show gif as loading screen and hide when it is completed.

$(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>

Upvotes: 0

Views: 293

Answers (1)

Biplove Lamichhane
Biplove Lamichhane

Reputation: 4095

Okay, first of all you could use modal and add gif file on top of it. Or you can simply add the image where you want to add. Here, I will work with modal.

$(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="[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>

In js, I have added result as object of ajax. And, right after data are sent, we show our gif file. And, after we gave got data, we will again hide gif div. Feel free to ask!!!!!!!!

Upvotes: 1

Related Questions