ValleyDigital ValleyDigital - 1 year ago 82
jQuery Question

Show loading gif after clicking form submit using jQuery

I'm trying to simply show a loading gif once the form is submitted. My code is not working correctly for the loading gif to show. You'll see my image for the gif is set to

visibility: hidden

<script src="js/jquery-1.11.1.min.js"></script>

<div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper">
<img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;">
<div class="fade" id="form">
<form action="process_login.php" method="POST" name="simplelogin" id="login_form"><br />
<label for="username">&nbsp; Username:</label>
<input type="username" name="username" id="username" size="30" required><br><br>
<label for="password">&nbsp; Password:</label>
<input type="password" name="password" id="password" size="30" required><br><br>
<input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit">
<div class="fifty"></div>

<script type="text/javascript">
$('.load_button').submit(function() {
return true;

Answer Source

The show() method only affects the display CSS setting. If you want to set the visibility you need to do it directly. Also, the .load_button element is a button and does not raise a submit event. You would need to change your selector to the form for that to work:

$('#login_form').submit(function() {
    $('#gif').css('visibility', 'visible');
    return true;