Button ändern

[fanta5]

Hallo,

mit <input type="submit" onclick="this.value='Bidde warten...' "value="Absenden"> schaffe ich es, den Button nach anklciken zu ändern. Kann ich auf diese Art auch noch ein Bildchen vor das Bidde warten einfügen???

Noch schöner wäre das natürlich mit onsubmit, aber da steht schon was anderes drinne.

Fanta5

[EKKi]

Mahlzeit fanta5,

Kann ich auf diese Art auch noch ein Bildchen vor das Bidde warten einfügen???

Ja.

Noch schöner wäre das natürlich mit onsubmit, aber da steht schon was anderes drinne.

Wer hat behauptet "in" onsubmit könne nur eine Anweisung stehen? Rufe dort eine Funktion auf und lasse in dieser Funktion dann alle Anweisungen ausführen, die Dir wichtig sind.

MfG,
EKKi

[fanta5]

Mahlzeit fanta5,

Kann ich auf diese Art auch noch ein Bildchen vor das Bidde warten einfügen???

Ja.

Sagst Du mir auch, wie?

Oder muß ich, damit Du nicht wieder einfach mit "ja" antwortest, auch diese Frage nochmal umformulieren?

Danke, fanta5

[Struppi]

Oder muß ich, damit Du nicht wieder einfach mit "ja" antwortest, auch diese Frage nochmal umformulieren?

ja.

Was heißt denn genau "Ein Bildchen einfügen"?
Vor allem, was hast du bisher versucht, wobei können wir helfen?

Struppi.

[fanta5.]

Was heißt denn genau "Ein Bildchen einfügen"?
Vor allem, was hast du bisher versucht, wobei können wir helfen?

Hi Struppi.

ich habe gestern abend ca. 2 Stunden mit googlen und probieren verbracht, aber es nict geschafft. Die Versuche habe ich aber natürlich nicht mehr.

Bildchen einfügen bedeutet, dass ich nicht nur den Text des Buttons ändere, sondern vor den geänderten Text ein Loading-Gif setzen möchte.

Gruß, Fanta5

[EKKi]

Mahlzeit fanta5.,

Bildchen einfügen bedeutet, dass ich nicht nur den Text des Buttons ändere, sondern vor den geänderten Text ein Loading-Gif setzen möchte.

Möchtest Du dabei ein neues Element vor dem Button in den DOM-Baum einhängen (wird komplizierter) oder willst Du vielleicht nur ein bereits dort vorhandenes, aber bisher ausgeblendetes Bild sichtbar machen (ist recht simpel)?

MfG,
EKKi

[fanta5]

Hi EKKI,

Möchtest Du dabei ein neues Element vor dem Button in den DOM-Baum einhängen (wird komplizierter) oder willst Du vielleicht nur ein bereits dort vorhandenes, aber bisher ausgeblendetes Bild sichtbar machen (ist recht simpel)?

Eigentlich weder noch. Ich dachte, ich könnte es mir so einfach machen, dass ich das
<input type="submit" onclick="this.value='Bidde warten...' "value="Absenden">
an irgendeiner Stelle um den img tag ergänze und das Ladebildchen wird innerhalb des Buttons platziert.

Oder, indem ich per onclick dem Button über ein css-Element ein Background-picture hiunzufüge.

Fall das Beides nicht geht, würde ich gerne versuchen, der function, die bereits nun dem onsubmit-Eventhandler anhängt zusätzlich den Austausch des Buttons gegen eine Grafik und entsprechendem Text auszutauschen. Das würde Deiner 2. Lösung entsprechen.

Optimal wäre in diesem Fall natürlich, wenn ich dazu sämtlichen erforderlichen Code in der Funktion selber erstellen könnte, da diese Funktion in einer externen Datei liegt, die ich include. Das hätte den Vorteil, dass ich nicht in die einzelnen Formulare hinein müßte, sondern ein (für alle) mal den Code ändere/ergänze und alle Formulare darauf reagieren.

Gruß, fanta5

[Vinzenz Mai]

Hallo,

Eigentlich weder noch. Ich dachte, ich könnte es mir so einfach machen, dass ich das
<input type="submit" onclick="this.value='Bidde warten...' "value="Absenden">

und was hindert Dich daran, das so zu machen, wie EKKi schon zu Anfang vorschlug:

<input type="submit" onclick="mache_alles_was_Du_brauchst(this)" "value="Absenden">  

und der hübschen selbstdefinierten Funktion

function mache_alles_was_Du_brauchst(elem) {  
    // Beschriftung ändern  
    elem.value = 'Bitte warten ...';  
  
    // Bildchen einblenden  
    // ...  
}  

Freundliche Grüße

Vinzenz

[fanta5.]

und was hindert Dich daran, das so zu machen,

// Bildchen einblenden
    // ...

Hallo Vinzenz,

das ist ja mein Problem. Ich weiß nicht, wie ich das Bildchen in den Button vor den Taext bekomme.

Mir wäre es auch recht, oder inzwischen sogar fast schon lieber, wenn ich den Button ganz rauswerfen und anstelle dessen nur das Bildchen mit einem Text einblenden könnte.

Natürlich, falls möglich, über Deine (und EKKIs) bereits angescprochenen Funktion.

Gruß, fanta5

[fanta5.]

das ist ja mein Problem. Ich weiß nicht, wie ich das Bildchen in den Button vor den Taext bekomme.

  
  <script type="text/javascript">  
function changeButton() {  
  document.getElementById('button1').value = 'Bitte warten...';  
  document.getElementById('button1').disabled = true;  
  document.getElementById('button1').style.background-image = "url(loading.gif)";  
  document.getElementById('button1').style.background-repeat = "no-repeat";  
  document.getElementById('button1').style.background-position = "2px 2px";  
  
  }  
</script>  
  
  
  
<form onsubmit="changeButton()">  
<input type="submit" id="button1" value="Anmelden">  
</form>  
  

Hat alles gut funktioniert, bevor ich wieder das gif einblenden wollte.
Value wurde geändert, Button deaktiviert und ich hatte sogar mal als Style-Eigenschaft de Fontgröße auf 200% gesetzt, auch das klappte prima.

Nur das Sch..-Hintegrundbild geht nicht!

Gruß, Fanta5

[fanta5.]

Nur das Sch..-Hintegrundbild geht nicht!

Wie soll man auf sowas kommen, wenn nicht durch Zufall??

[fanta5.]

Hallo,

nach viel Müh habe ich nun also die Lösung, aber sie gefällt mir nicht.

  
  <script type="text/javascript">  
function changeButton() {  
  document.getElementById('button1').value = '      Bitte warten...';  
  document.getElementById('button1').disabled = true;  
  
  document.getElementById('button1').style.backgroundImage = "url(loading.gif)";  
  document.getElementById('button1').style.backgroundRepeat = "no-repeat";  
  document.getElementById('button1').style.backgroundPosition = "2px 2px";  
  
  }  
</script>  
  
<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?

Gruß, fanta5

[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

[fanta5.]

Hi Vinzenz,

das ist doch schon ein Erfolg.

Ja, doch. Aber es schlaucht mich ganz schön.

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

OK.

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

Beinhaltet aber, dass ich in alle meine Formulare rein muß und sie ändern muß.

Trotzdem, Deine Lösung ist schön schlank und sieht sauber aus. Werde ich testen.

Ich denke, ich habe in der Zwischenzeit an der komplizierteren Lösung gebastelt und sie auch hin bekommen. Nur mein Ladebildchen ist nicht animiert und ich weiß nicht, warum.

Darf ich vorstellen?

  
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">  
function change_it() {  
  
  var vorhandeneid = 'button1';  
  if (document.getElementById(vorhandeneid)) {  
    document.getElementById("dok1").removeChild(document.getElementById(vorhandeneid));  
}  
  
  
  var neueid = 'test';  
  if (neueid != "" && neueid != null) {  
    var neuesElement = document.createElement("p");  
    neuesElement.setAttribute("id", neueid);  
    neuesElement.style.color = '#FF0000';  
    neuesElement.innerHTML = "<img src='loading.gif' width='16' height='16' border='0' alt=''><B>Bitte warten....<\/B>";  
    document.getElementById("dok1").appendChild(neuesElement);  
  }  
}  
</SCRIPT>  
  
<FORM ACTION="" NAME="auswahl" onSubmit="change_it()">  
  
<div id='dok1'>  
<input type="submit" id="button1" value="Anmelden">  
</div>  
</FORM>  
  

// Die Anweisung bekommst Du bestimmt selbst hin.

Doch, doch, das schaff ich schon ;-)

Welche Lösung soll ich nun nehmen? Weil, in alle Formulare muß ich in beiden Fällen, es sei denn, Dir oder jemandem anderen fällt hierzu noch was ein?

Gruß, Fanta5

[fanta5.]

Hi Vinzenz,

Welche Lösung soll ich nun nehmen? Weil, in alle Formulare muß ich in beiden Fällen, es sei denn, Dir oder jemandem anderen fällt hierzu noch was ein?

Ich habe mich für Deine Lösung entschieden. Sie hat den Vorteil, dass sie quasi einen Bild-Preload beinhaltet, was sich bei einer sehr langsamen Netzverbindung bemerkbar macht, wenn auch nur minimal.

Danke für die Hilfe, fanta5

[Struppi]

Bildchen einfügen bedeutet, dass ich nicht nur den Text des Buttons ändere, sondern vor den geänderten Text ein Loading-Gif setzen möchte.

Der Button selbst hat nur Text. Um sowas zu machen, musst du ein Bildelement erzeugen und unmittelbar davor platzieren. Welche Informationen brauchst du dazu?

Struppi.

[fanta5]

Der Button selbst hat nur Text. Um sowas zu machen, musst du ein Bildelement erzeugen und unmittelbar davor platzieren. Welche Informationen brauchst du dazu?

Hi Struppi,

bist Du sicher? Es sollte doch möglich sein, über ein Hintergrundbild Text und Gif in einem Button zu platzieren. Und über Javascript sollten doch auch nachträglich auf Clientebene die css-Eigenschaften änderbar sein.

Somit müsste doch auch möglich sein, einem Button einen Eventhandler anzuhängen, der sowohl den Text des Buttons ändert, als auch die background-css-Eigenschaft.

Aber syntaktisch bekomme ich das nicht hin.

Gruß, Fanta5

[dave]

Hi,

ich blick glaub ich nicht ganz was du machen willst.

Was hindert dich daran das <http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern@title=Bild so einzufügen> oder einfach ein background-image:url()?

~dave