web-dev-qa-db-fra.com

Afficher le chargement gif après avoir cliqué sur l'envoi du formulaire à l'aide de jQuery

J'essaie simplement de montrer un gif de chargement une fois le formulaire soumis. Mon code ne fonctionne pas correctement pour l'affichage du gif de chargement. Vous verrez que mon image pour le gif est définie sur 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>
javascriptjqueryformsgif
10
ValleyDigital

La méthode show() affecte uniquement le paramètre CSS display. Si vous souhaitez définir la visibilité, vous devez le faire directement. En outre, l'élément .load_button est un bouton et ne déclenche pas un événement submit. Pour que cela fonctionne, vous devez changer votre sélecteur en form:

$('#login_form').submit(function() {
    $('#gif').css('visibility', 'visible');
});
23
Rory McCrossan

Les entrées de bouton n'ont pas d'événement de soumission. Essayez d’attacher le gestionnaire d’événements au formulaire à la place:

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

Meilleur et propre exemple utilisant uniquement JS

Référence: TheDeveloperBlog.com

Étape 1 - Créez votre script Java et placez-le 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, appelez la fonction de script Java lors de l'événement submit. 

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

Peu de temps après avoir soumis le formulaire, il vous montrera l'image de chargement.

2
BenW

Qu'en est-il d'une fonction onclick:

    <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 le déclencher avec un onClick

0
Nebulosar