wake-up-neo.net

Ladegif anzeigen, nachdem Sie das Formular mit jQuery abgeschickt haben

Ich versuche einfach ein Ladegif zu zeigen, sobald das Formular gesendet wurde. Mein Code funktioniert nicht richtig, damit das Ladegif angezeigt wird. Sie sehen, dass mein Bild für das GIF auf visibility: hidden eingestellt ist.

<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

Die show()-Methode wirkt sich nur auf die CSS-Einstellung display aus. Wenn Sie die Sichtbarkeit einstellen möchten, müssen Sie dies direkt tun. Das .load_button-Element ist auch eine Schaltfläche und löst kein submit-Ereignis aus. Sie müssen Ihren Selector auf form ändern, damit dies funktioniert:

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

Tastatureingaben haben kein Submit-Ereignis. Fügen Sie stattdessen den Ereignishandler an das Formular an:

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

Besseres und saubereres Beispiel nur mit JS

Referenz: TheDeveloperBlog.com

Schritt 1 - Erstellen Sie Ihr Java-Skript und platzieren Sie es in Ihrer HTML-Seite.

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

rufen Sie in Ihrem Formular die Java-Script-Funktion beim Submit-Ereignis auf. 

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

Bald nachdem Sie das Formular abgeschickt haben, wird Ihnen das Ladebild angezeigt.

2
BenW

Was ist mit einer Onclick-Funktion:

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

Natürlich können Sie dies in eine Funktion setzen und dann mit einem onClick auslösen

0
Nebulosar