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.

 

Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/.

Dieser Text wurde erstellt von Stefan Mintert (©) und zuletzt bearbeitet von Christine Kühnel.

 
© S. Mintert, Ch. Kühnel

 ______ letzte Änderung: 01.01.2002 ______ 

 

Original-URL dieser Datei: http://dcljs.de/faq/antwort.php?Antwort=forms_imgsubmit