Show loading gif after clicking form submit using jQuery

Question

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`. ```

Accepted Answer

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');
});
```

Also note that `return true;` is redundant in your logic, so it can be removed.

Show loading gif after clicking form submit using jQuery

Solution

Problem