Wie kann ich mit Submit Button im Formular eine "wird geladen" einbinden?

Guten Tag,
ich habe ein Formular mit Submit-Button (abschicken). Wenn der Besucher das Formular abschickt, kommt er auf eine Antwortseite. Das Problem ist: die Antwortseite lädt (erscheint) erst nach mehreren Sekunden. Damit der Besucher dies auch merkt, möchte ich, dass beim Button anklicken eine animiertes Bild erscheint (Anlage). Was muss ich auf meiner Page (Formular) eingenben (CSS oder Javascipt) damit der Besucher das Bild dann sieht?
Vielen Dank
Hans
loading

Du machst ein verstecktes DIV mit dem Bildchen an die Stelle des Dokumentes, wo du es gern haben willst. Dann deaktivierst du den Sendenbutton, wenn er gedrückt wird und blendest gleichzeitig dein verstecktes DIV ein. Fertig.

verstecken mit CSS: display:none

Butten deaktivieren mit Javascript: https://stackoverflow.com/a/12949211

Einblenden mit Javascript: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

Hallo Frau Blume,
vielen Dank für Deine Info, die ich mit großem Interesse gelesen habe.
Ich bin 70 Jahre und habe keine Ahnung was ein DIV ist.
Wenn Du Zeit und Lust hast, kann Du ja mal auf meine Page gehen,
da habe ich in rot geschrieben was ich meine.
http://www.fenster-tiefpreise.de/fragen.html
Wenn Du eine Lösung hast, wäre es auch schön, wenn Du mir die
Quelltext schreiben würdest (CSS, html) und wo ich den einfügen
soll.
Vielen Dank für Deine Bemühungen.

mfG
Hans-W. Hartmann

das ist aber komisch. Ich hätte gedacht, dass du weißt, wie man sich Infos über HTML holt, nachdem du das schriebst:

Und darf ich noch erfahren, warum du als 70-jähriger Laie (bitte nicht übel nehmen) für einen Unternehmenswebauftritt verantwortlich bist?

Mach ich gern. Ich würde dir einen Freunschaftspreis machen. 100€ Spende an die Bahnhofmission: https://www.bahnhofsmission.de/index.php?id=7

Ich bin für den Unternehmensauftritt verantwortlich, weil das meine Firma ist.

Zahle 50,-- € als Spende an https://www.bahnhofsmission.de/index.php?id=7 wenn Du mir
den Code geschickt hast und die Seite funzt.

Sorry, das ist nicht verhandelbar. Ich schrieb 100€ und das sollte für einen Unternehmensauftritt nicht zu viel sein. Professionelle Webentwickler rufen Stundesätze >65€ netto auf. Mit kurzem Vorgespräch und Einarbeitung in den konkreten Fall würde ein Profi ganz sicher mehr als 100€ brutto aufrufen.

Bitte zeig hier eine Spendenbescheinigung, dann liefere ich dir den entsprechenden Quellcode.

Hallo,
habe gerade 100 € an die Bahnofsmission per Visa Card gezahlt.
Wäre auch nicht schlecht, wenn man die Seite nach der Spende ausdrucken könnte, um so einen Beleg in den Händen haben zu können. So müssen Sie sich bei der Bahnhofsmission erkundigen, ob das Geld eingegangen ist.
Erwarte dann die entsprechenden Quelltexte.
mfG
Hans Hartmann

Spendenquittung??

Ich?

Naja, ich warte erstmal auf deinen Beweis. Sorry aber du machst mir keinen sonderlich vertrauenserweckenden Eindruck.

Spendenquittung gibt es nicht, da ich unter 200, Euro keine benötige.
Warte einfach ab, bis Dir der „Nichtvertrauenswürdige“ die Kopie der
Kreditkartenabrechnung schickt.

Dein Auftreten hier ist einfach total unglaubwürdig. Einerseits sagst du, du bist 70, hast aber ne Firma für Fenstervertrieb. Für diese Firma hast du eine Webseite geschrieben in HTML und CSS, weißt aber nicht was ein DIV ist. Du kommst hier her und forderst Hilfe für ein Wirtschaftsunternehmen und bist dann grummelig, wenn das was kostet. Du hast als Unternehmen 100€ gespendet und brauchst keinen Beleg?

Sorry, mein lieber Hans. Ist echt keine Beleidigung aber hier kann jeder alles erzählen. Und bisher sehen deine Beiträge genau so aus.

Hallo,
vielen Dank für Deine Antwort. Um Dich nicht dumm sterben zu lassen hier mal einige Infos für Dich:

  1. Ich bin 70 Jahre, Rentner und bin noch so fit, ein kleines Unternehmen zu haben.
  2. In Html kenne ich mich einigermaßen aus, in CSS so gut wie nicht. Darum weiß ich auch nicht, was ein DIV ist.
  3. Die in meiner Page benutzten CSS-Anwendungen habe ich von anderen Seiten „geklaut“, bzw. gekauft. https://www.on-mouseover.de/templates/
  4. Als Unternehmen brauche ich bei Spenden bis 200,-- € keinen Beleg; das Finanzamt erkennt das an. Und im Gegensatz zu CSS kenne ich mich als Dipl.-Kfm. in solchen Dingen gut aus.
    Liebe Flowerwoman, ich habe auch keine Lust mehr mich mit Dir über meine Glaubwürdigkeit auseinanderzusetzen. Du hast eben Deine Meinung, und die will ich Dir auch nicht nehmen. Scheinst ja nicht so viel Menschenkenntnis zu haben.
    Sobald ich den Kontoauszug von meinem VISA-Card Konto habe, schicke ich ihn Dir, und dann mach einfach das, was ich dafür von Dir gewünscht habe.
    Vielen Dank.

Danke für deine Zusammenfassung. Sehr erhellend.

Das sehe ich anders. Ich bin einfach schon ein paar Jahre in solchen Foren unterwegs und ein bisschen vorsichtig, was Trolle angeht. Meine Meinung habe ich verargumentiert, du sahst halt aus wie ein typischer Troll. Aber nach deiner Erklärung glaube ich dir schon eher. So schnell kann das gehen.

Das musst du nicht machen, ich glaubs dir auch so.

Also, ersetze Zeile 255 bis 257 deiner HTML-Datei mit folgendem Stückchen:

<p align="center">
    <input type=submit value="Abschicken" onClick="this.disabled = true;document.getElementById('rotatingImage').style.display = 'block';">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Gray_circles_rotate.gif" alt="" style="display:none;width:50px;height:50px;" id="rotatingImage">
    <a href="antwort.html">
        WAS IST DAS FÜR EIN LINK?? KANN DER WEG??
    </a>
</p>

Ich habe als Animation ein Bild von Wikimedia genommen. Das kannst du dir runterladen und auf deinen eigenen Webspace hochladen. Dann musst du nur den entsprechenden Link ändern.

Was ich aber noch sagen muss: Dein HTML sieht nicht besonders gut aus. Und damit meine ich nicht nur die Optik des Ergebnisses, sondern vor allem auch die Quelltextstruktur. Du hast eine große Menge syntaktische Fehler drin, dein grundlegender Dokumentenaufbau stimmt nicht und dass das überhaupt funktioniert ist ein kleines Wunder.

Beweis: https://validator.w3.org/check?uri=http%3A%2F%2Fwww.fenster-tiefpreise.de%2Ffragen.html&charset=(detect+automatically)&doctype=Inline&group=0

Ich würde dir sehr dringend raten, dir professionelle Hilfe zu holen. Das kannst du nicht alleine leisten.

Vielen Dank für Dein Vertrauen. Die 100,-- € sind lt. meiner Kreditkartenabrechnung (leider kann ich hier keine PDF-Datei als Beweis hochladen) gestern an die Bahnhofmission abgebucht worden.
Ich habe Deinen Code in meine Seite eingefügt - läuft prima. Danke.
Zu Deiner Bemerkung das meine Seite trotzt des „fehlerhaften“ HTML funzt, kann ich nur eines sagen:
Eine Hummel dürfte lt. Ihres Körpergewichtes und der kleinen Fügel nicht fliegen können - sie fliegt aber trotzdem :wink:
Wenn ich die Page „professionell“ ändern lassen würde, könntest und würdest Du das machen (gegen Spende an Bahnhofsmiss :innocent:

Sorry, das würde meine zeitlichen Möglichkeiten übersteigen. Such dir eine Webdesignfirma in deiner Nähe, die entwerfen dir ein modernes Layout und programmieren dir das nach heutigen Standards.

Ich kann dann gern am Ende oder zwischendrin mal drüberschauen, ob die ihren Job sachlich richtig machen.

Aber ich denke, für sowas wirst du vierstellig bezahlen müssen, auch wenn du eigentlich nur wenige Seiten hast. Mach dir da bitte keine falschen Vorstellungen. Viel Erfolg.

P.S. Hummeln können auch laut Körpergewicht und Flügelgröße fliegen. https://de.wikipedia.org/wiki/Hummel-Paradoxon

Wo ist denn deine Webseite hin? Ich dachte, die ist Businesskritisch.

Und eine Wordpress-Setup-Seite öffentlich im Netz zugänglich zu machen ist extrem gefährlich. Damit kann jeder Idiot dein neues Wordpress in eine Malwareschleuder verwandeln.

Meine Seite ist da, wo sie immer war. Wird z.Zt. umgebaut. Wordpress benutze ich überhaupt nicht.

Aha. Das sieht deine Seite aber anders. http://www.fenster-tiefpreise.de/wp-admin/setup-config.php

Geh einfach auf unsere RICHTIGE Seite[1]
[1]: https://www.fenster-tiefstpreise.de
Die habe ich als Laie übrigens ganz allein erstellt. Und darauf bin ich stolz :wink: