onclick() auf Submit Button Grafik anzeigen, solange es lädt.

aJunkie · 21 Mai 2010

Hallo,

ich habe ein Kontaktformular mit Dateiupload.
Wenn die Datei ein paar MB groß ist, dauert es ein wenig, bis die Seite lädt (Erfolgs- oder Fehlermeldung) und da es sicherlich genug Leute gibt, die nach 10, 20 Sekunden warten denken, es würde nichts passieren, wieder auf den Submit Button klicken.

Ich dachte daran, sobald der Submit Button geklickt wurde und die Datei uploadet, sollte eine Grafik (loading.gif) angezeigt werden, sodass der Besucher sieht, dass da was lädt und warten soll, statt 10 mal auf Submit zu klicken und die Seite zu verlassen, weil er denkt, es ist kaputt.

Nur habe ich keine Ahnung von JS.
onclick wird hier wohl gebraucht. Mehr weiß ich nicht.

threadi · 21 Mai 2010

Jap, sowas kannst Du nur per onclick regeln. Beispiel:

Code:

<button type="submit" onclick="this.disabled='disabled';">Senden</button>

Das würde den Button deaktivieren, also auch deaktiviert darstellen, so dass man nicht nochmal draufklicken kann.

Daneben gibt es natürlich auch noch mehr Möglichkeiten. Je nachdem was genau Du erreichen willst.

aJunkie · 21 Mai 2010

Ja, sowas halt.
Besser wäre: Dass das SubmitButton durch eine gif ersetzt wird. Also submit verschwinden lassen und darüber eine Grafik.

Habe aber das da oben ausprobiert: Es funktioniert, aber dann mein PHP Code nicht mehr. Die Fehlermeldungen werden nicht angezeigt. Seite wird dann einfach neugeladen.

threadi · 22 Mai 2010

JavaScript hat nichts mit php zu tun. Wenn sowas passiert hast Du irgendwas falsch gemacht.

aJunkie · 22 Mai 2010

Normal funktioniert's, aber wenn ich onclick einbaue nicht mehr.

threadi · 22 Mai 2010

Mit dieser Aussage kann dir niemand helfen. Zeig einen Link zur Seite oder den Quellcode der Seite.

aJunkie · 22 Mai 2010

PHP:

<?php
    if (isset($_POST['submit'])) {    // wenn Formuluar abgeschickt. name="submit"
        $ausgabe = '';                // Ausgabe standardmäßig leer.
        $fehler = '';                // Keine Fehlermeldung vorhanden beim Erstaufruf.
        
        
        // Fallunterscheidungen. Was ist vorhanden, was nicht, was sind Pflichtfelder
        
        if(isset($_POST['pname']) && !is_array($_POST['pname']) && $_POST['pname'] != '') {        // Name, Vorname
            $ausgabe .= '<b>Name:</b> ' . htmlspecialchars($_POST['pname']) . '<br>';
        } else {
            $fehler .= 'Bitte Namen eingeben!<br>';                                                // Fehlermeldung, hier also ein Pflichtfeld. Fehlermeldung anhängen.
        }
        
        if(isset($_POST['pkname']) && !is_array($_POST['pkname']) && $_POST['pkname'] != '') {    // Künstlername
            $ausgabe .= '<b>Künstlername:</b> ' . htmlspecialchars($_POST['pkname']) . '<br>';
        }
        
        if(isset($_POST['pkontakt']) && !is_array($_POST['pkontakt']) && $_POST['pkontakt'] != '') {    // Kontaktieren, wie?
            $ausgabe .= '<b>Bitte kontaktiert mich per:</b> ' . htmlspecialchars($_POST['pkontakt']) . '<br>';
        } else {
            $fehler .= 'Bitte angeben, wie wir dich kontaktieren sollen.<br>';    
        }
        
        if(isset($_FILES['pprobe']) && ($_POST['fehler'] == '') && $_POST['pname'] != '') {                                                                // wenn Datei ($pprobe) vorhanden
        $ausgabe .= '<b>Dateiname:</b> ' . htmlspecialchars($_FILES['pprobe']['name']);                // Dateiname
        move_uploaded_file($_FILES['pprobe']['tmp_name'],                                            // vom Temp Ordner in angegebenes Verzeichnis verschieben.
        'missbrauch/uploads/' . basename($_FILES['pprobe']['name']));
        $ausgabe .= ' <a href="http://example.org/ordner/ordner/' . htmlspecialchars($_FILES['pprobe']['name']) . '" target="_blank">Datei öffnen</a><br>';
        }
        
        if(isset($_POST['pdlink']) && !is_array($_POST['pdlink']) && $_POST['pdlink'] != '') {
            $ausgabe .= '<b>Dateilink:</b>    <a href="' . htmlspecialchars($_POST['pdlink']) . '">Dateilink</a><br>';
        }
        
        if(isset($_POST['ptext']) && !is_array($_POST['ptext']) && $_POST['ptext'] != '') {
            $ausgabe .= '<br><b>Bemerkung:</b><br> ' . htmlspecialchars($_POST['ptext']) . '<br>';    
        }
        
        if(isset($_POST['paccept']) && !is_array($_POST['paccept']) && $_POST['paccept'] == 'pok') {    // Bedingungen akzeptiert? Pflichtfeld
            $ausgabe .= '<br><b>Ich habe die Bedinungen gelesen und akzeptiere sie, sonst wäre diese E-Mail nicht automatisch beim Webmaster von example.org angekommen (PHP-Mailer).</b>';
        } else {
            $fehler .= 'Bedingungen nicht akzeptiert!<br>';    
        }
        

        if ($fehler == '') {       // Wenn keine Fehler vorhanden, also $fehler ist leer, dann...
            echo '<h2>Anfrage erhalten</h2>';
            echo '<b>Vielen Dank für dein Interesse an einer Kooperation. Wir haben deine Anfrage erhalten und werden uns schnellstmöglich darum kümmern.</b><br>';
            echo '<b>Wenn wir uns für eine Kooperation mit dir entscheiden sollten, geben wir dir Bescheid und gehen miteinander die Details durch.</b><br>';
            include("footer.php");
            exit();
        }
    }
?>

Script gekürzt.

PHP:

<?php // Wenn Fehler vorhanden, Fehlermeldung(en) ausgeben.
if ($fehler) echo '<span style="color:red; font-weight:bold;">' . $fehler. '</span>'; ?>

<form action="" method="post" enctype="multipart/form-data">
<table>
<tr><td>Name, Vorname</td><td><input type="text" name="pname" value="<?php 
if (isset($_POST['pname']) && !is_array($_POST['pname'])) {
    echo htmlspecialchars($_POST['pname']);
}
?>"></td></tr>

<tr><td>Hörprobe <span class="ten" style="font-weight:bold;">mp3-Datei, maximale Dateigröße 5 MB</span></td><td><input type="file" name="pprobe" size="35"></td></tr>
<tr><td>... oder Link zur Datei</td><td><input type="text" name="pdlink" value="<?php
    if(isset($_POST['pdlink']) && !is_array($_POST['pdlink'])) {
    echo htmlspecialchars($_POST['pdlink']);    
    }
?>" size="35"></td></tr>
<tr><td><a href="<?php echo $pprobe; ?>"><?php echo $pprobe; ?></a></td></tr>
<tr><td valign="top">Bemerkung</td><td><textarea name="ptext" cols="40" rows="3"><?php
    if(isset($_POST['ptext']) && !is_array($_POST['ptext']) && $_POST['ptext'] != '') {
        echo htmlspecialchars ($_POST['ptext']);    
    }
?></textarea></td></tr>
<tr><td colspan="2"><input type="checkbox" name="paccept" value="pok" <?php
    if (isset($_POST['paccept']) && $_POST['paccept'] == "pok") {
        echo ' checked"';    
    }
?>> Ich habe die Bedingungen gelesen und akzeptiere sie.</td></tr>
<tr><td class="ten" colspan="2"><br>Formular bitte nur einmal abschicken. Datei-Upload kann einige Zeit, je nach Dateigröße, in Anspruch nehmen.</td>
<tr><td align="center" colspan="2">
<input type="hidden" name="pcheck" value="los">
<input type="submit" name="submit" value="Kooperation anfragen"></td></tr>
</table>
</form>

... auf das Wesentliche gekürzt.

threadi · 22 Mai 2010

Und wie sieht dein onclick aus? Das fehlt dort ...

aJunkie · 22 Mai 2010

Ja, das habe ich rausgenommen. Es sieht genau so aus wie deins...

<input type="submit" name="submit" value="Kooperation anfragen">
ääääh oder auch nicht.

Jetzt sehe ich es.

Du hast kein input type, sondern button. Ich werde es heute Nacht ausprobieren, bin mir aber sicher, dass es funktionieren wird. :)

Danke.

threadi · 22 Mai 2010

Bei einem input-submit muss man glaube ich readonly verwenden statt disabled.

aJunkie · 31 Mai 2010

Danke, mit disabled funktioniert's auch.

Aber wäre halt cool, wenn es gleichzeitig auch bei onclick eine Grafik einblenden ließe.
Nur um sicher zu gehen. Bei DSL 6000 dauert das schon ein paar Sekunden, bis 5MB hochgeladen wurden.

:-/

<input type="submit" name="submit" value="Kooperation anfragen" onclick="this.disabled='disabled';">

threadi · 31 Mai 2010

Wenn Du eine 5MB-Grafik nutzt, dann solltest Du diese dringend verkleinern.

Eine Grafik kann man durchaus noch einblenden. Als Hintergrund oder IMG - suchs dir aus :)

aJunkie · 31 Mai 2010

Nein, ich meine:
Es ist ein Kontakt- und Uploadformular.
Datei ausgewählt, abgeschickt -> Datei wird hochgeladen. Da vergehen einige Sekunden bis Minuten.
In der Zwischenzeit soll außer dem displayed on click eine Grafik angezeigt werden.

Ob Background oder IMG: keine Ahnung. Ich dachte an eine gif Datei mit 15x15 Größe rechts neben dem Submit Button, bei Klick darauf.

threadi · 31 Mai 2010

Klar, im einfachsten Fall fügst Du einfach eine Bild-Grafik neben den Button ein die Du per "display: none;" fürs erste unsichtbar machst. Wenn Du den Button disablest blendest Du diese Grafik dann ein:

Code:

obj.style.display = "block";

Solche bewegten Grafiken findet man auf verschiedenen Seiten unter dem Stichwort GIF Animation Ladebalken oder ähnlich.

aJunkie · 2 Juni 2010

So sieht's im Moment immer noch aus:

HTML:

<input type="submit" name="submit" value="Kooperation anfragen" onclick="this.disabled='disabled';">

Kommt das "block" auch in die Zeile oder in einen neuen img-tag?
Wenn ja, wie sage ich dem, dass er schauen soll, ob der submit geklickt wurde und dann die Grafik zeigt?

threadi · 2 Juni 2010

Beispiel:

Code:

 onclick="this.disabled = 'disabled';document.getElementById('animiertesGIF').style.display = 'block';"

aJunkie · 2 Juni 2010

HTML:

<input type="submit" name="submit" value="Kooperation anfragen" onclick="this.disabled = 'disabled';document.getElementById('/img/loading.gif').style.display = 'block';">

Funktioniert leider nicht. :-/

threadi · 2 Juni 2010

Bei

Code:

getElementById()

musst Du die ID des Elements angeben welches Du sichtbar machen willst. Dieses muss natürlich auch existieren. Du darfst dort nicht den Pfad zu einem Bild angeben!

Bitte informieren: SELFHTML: JavaScript / Objektreferenz / document

aJunkie · 3 Juni 2010

Meine Versuche schlagen fehl. Die Grafik wird trotzdem angezeigt.

HTML:

<input type="submit" name="submit" value="Kooperation anfragen" onclick="this.disabled = 'disabled';document.getElementById('gif').style.display = 'block';">
<img src="bild" id="gif">

Habe mir deinen Link aber auch angeschaut. Das Beispiel auf der Seite verstehe ich, aber weiß nicht, wie ich es hier einbinde.

Bei JS bin ich noch nicht. :-/

threadi · 3 Juni 2010

Die Grafik soll ja auch angezeigt werden durch Klick auf den Button?

Wenn es dir darum geht die Grafik vor dem Klick abzuschalten, dann musst Du das auch tun:

Code:

<img src="bild" id="gif" style="display: none;">

Und btw. solltest Du überlegen ob "onclick" so gut ist. Evtl. wären diese JavaScript-Funktionen im onsubmit des form-Tags besser aufgehoben. Schließlich kann man viele Formulare auch mit der Entertaste abschicken.

onclick() auf Submit Button Grafik anzeigen, solange es lädt.

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator