Geschafft, aber ...

[Vinzenz Mai]

Hallo,

nach viel Müh habe ich nun also die Lösung,

das ist doch schon ein Erfolg.

aber sie gefällt mir nicht.

Schritt für Schritt, das ist doch nicht schlimm.

<form onsubmit="changeButton()">
<input type="submit" id="button1" value="Anmelden">
</form>

Wie kann ich die Funktion dahingehend ändern, dass der Button bei onsubmit komplett verschwindet und stattdessen ein DIV (das Bild und Text beinhaltet) an seine Stelle eingeblendet wird?

viel einfacher. Aber ein nettes p-Element reichte schon aus. Wir bauen das gewünschte Element gleich in den HTML-Code ein und blenden es per CSS aus.

Anschließend muss beim Klicken auf den Button nur noch

a) der Button aus- und
b) das p-Element eingeblendet werden

Dieser Vorschlag ist übrigens von EKKi.

HTML:

<form onsubmit="changeButton()">  
    <input type="submit" id="button1" value="Anmelden">  
    <p id="loading">Bitte warten</p>  
</form>  

CSS:

#loading {  
    background-image: url(loading.gif);  
    background-repeat: no-repeat;  
    background-position: 2px 2px;  
    /* Platz fürs Ladebild über padding schaffen, keine Leerzeichen :-) */  
    /* Du kennst Dein Bild, Du kannst aus seinen Maßen ermitteln,  
       wieviel Innenabstand Du benötigst */  
    padding-left: 25px;  
    /* und zu Beginn ausblenden :-) */  
    display: none;  
}

Javascript:

function changeButton() {  
    // Blende Submit-Button aus  
    document.getElementById('button1').[ref:self812;javascript/objekte/style.htm@title=style].[ref:self812;javascript/objekte/style.htm#style_eigenschaften@title=display] = "[ref:self812;css/eigenschaften/positionierung.htm#display@title=none]";  
  
    // Blende auf vergleichbare Weise das p-Element mit  
    // Hintergrundbild und Text ein  
    // Die Anweisung bekommst Du bestimmt selbst hin.  
  
}  

Freundliche Grüße

Vinzenz