Homepage de.comp.lang.javascript
Homepage
de.comp.lang.javascript

FAQ de.comp.lang.javascript

FAQ
de.comp.lang.javascript

 

 

Bitte verwenden Sie als Einstiegsadresse in diese FAQ die Homepage der Newsgroup de.comp.lang.javascript. Der Aufenthaltsort dieser Seiten hier kann sich ohne Vorwarnung ändern.
 

 

Wie kann ich den SUBMIT-Button durch ein Bild ersetzen?

Ein JavaScript-Programm kann ein HTML-Formular mit Hilfe der Methode form.submit() abschicken. Analog dazu gestattet form.reset() das Zurücksetzen des Formulares. Um nun aus einem Bild einen Submit/Reset-Button zu machen, muß das Bild lediglich zu einem Hyperlink werden, der dann die gewünschte Formular-Methode aufruft.

Das folgende Beispiel ruft die Methoden nach dem Anklicken eines Links auf. Die Links sind hier durch Bilder dargestellt.

Formulareingabe:

Der erste Link (Submit) benutzt den URL javascript:abschicken(), der zweite Link benutzt javascript:zuruecksetzen(). Die Funktionen sehen so aus:

function anzeige() // Anzeigen des Formular-Inhaltes und Abfragen,
{                  // ob es wirlkich abgeschickt werden soll.
  var forminhalt = document.testform.text.value;
  return confirm("Der eingegebene Text war: \n" + 
                  forminhalt + 
                  "\nSoll ich wirklich abschicken?");
}

function abschicken()
{
  if (anzeige())   // Abschicken, falls confirm den Wert true liefert.
    self.document.testform.submit();
}

function zuruecksetzen() // Zuruecksetzen 
                         // und dann anderes Bild anzeigen
                         // (nur für Browser, die das Image-Objekt kennen):
{
  self.document.testform.reset();
  if (document.images)
    self.document.reset.src = reset2.src;
}

// zweites Reset-Bild vorladen 
// (nur für Browser, die das Image-Objekt kennen):
if (document.images)
{
  var reset2 = new Image();
  reset2.src = "reset2.gif";
}

Achtung: Folgende Probleme entstehen bei Benutzung der submit()- bzw. reset()-Methode.

top

Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/. Der Text der Seite wurde erstellt von Stefan Mintert (©) und zuletzt bearbeitet von Christine Kühnel.

 ______ letzte Änderung: 12/2012 ______ 

 
© S. Mintert, Ch. Kühnel