Spectacle de chargement gif après avoir cliqué sur soumettre le formulaire à l'aide de jQuery

Je suis en train de simplement afficher un gif de chargement une fois que le formulaire est soumis. Mon code ne fonctionne pas correctement pour le chargement gif pour montrer. Vous allez voir mon image pour que le gif est fixé à 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">
        </form>
    </div>
</div>
<div class="fifty"></div>

<script type="text/javascript">
    $('.load_button').submit(function() {
        $('#gif').show(); 
        return true;
    });
</script>
Selon le jQuery API api.jquery.com/submit votre input éléments ne devraient pas namesou ids comme submit
Merci @TVD je vais obtenir ce fixe.

OriginalL'auteur ValleyDigital | 2014-11-19

  1. 23

    La show() méthode n'affecte que le display CSS réglage. Si vous souhaitez définir la visibilité dont vous avez besoin pour le faire directement. Aussi, le .load_button élément est un bouton et ne soulèvent pas un submit événement. Vous devrez modifier votre sélecteur à la form pour que cela fonctionne:

    $('#login_form').submit(function() {
    $('#gif').css('visibility', 'visible');
});
    Vous pouvez également utiliser setTimeout() pour mettre en pause et afficher le gif pendant quelques secondes avant de vous les présenter.

    OriginalL'auteur Rory McCrossan

  2. 7

    Entrées bouton n'avez pas de soumettre cas. Essayez de fixer le gestionnaire d'événement à l'écran à la place:

    <script type="text/javascript">
     $('#login_form').submit(function() {
       $('#gif').show(); 
       return true;
     });
 </script>

    OriginalL'auteur dave

  3. 2

    Mieux et propre exemple d'utilisation de JS seulement

    Référence: TheDeveloperBlog.com

    Étape 1 - Créez votre java script et de le placer dans votre page HTML.

    <script type="text/javascript">
    function ShowLoading(e) {
        var div = document.createElement('div');
        var img = document.createElement('img');
        img.src = 'loading_bar.GIF';
        div.innerHTML = "Loading...<br />";
        div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000';
        div.appendChild(img);
        document.body.appendChild(div);
        return true;
        //These 2 lines cancel form submission, so only use if needed.
        //window.event.cancelBubble = true;
        //e.stopPropagation();
    }
</script>

    dans votre formulaire d'appeler la fonction javascript sur soumettre un événement. 

    <form runat="server"  onsubmit="ShowLoading()">
</form>

    Bientôt après que vous soumettez le formulaire, il vous montrera le chargement de l'image.

    Ce n'est pas supprimer le Chargement bannière après la forme revient.

    OriginalL'auteur BenW

  4. 0

    Que sur un onclick function:

        <form id="form">
    <input type="text" name="firstInput">
    <button type="button" name="namebutton" 
           onClick="$('#gif').css('visibility', 'visible');
                    $('#form').submit();">
    </form>

    Bien sûr, vous pouvez mettre ceci dans une fonction, puis déclencher avec un onClick

    OriginalL'auteur Nebulosar