# Formular bei onsubmit action unterdrücken



## shredder01 (16. Januar 2009)

Hallo,

ich scheitere z.Z. daran bei einem Formular bei der Benutzung von onsubmit die Action des Formulars zu unterdrücken. Ausgangspunkt für meine Experimente ist das hier http://www.mediaevent.de/javascript/onsubmit.html (ganz unten) und das hier http://www.mediaevent.de/javascript/event_listener.html.
Vereinfacht sieht mein Code folgendermaßen aus:

```
function load() {
       var e = document.getElementById('searchform');
     addEvent(e,'submit',myFunction,false);
  }
function myFunction() {
        if (blabla) {
         alert('Fehler!');
         return false;
       } else {
         myOtherFunction(blabla);
         return false;
       }
     }
function addEvent(element, evType, func, useCaption)
{
  if (element.addEventListener) {
    element.addEventListener(evType, func, useCaption);
    return true;
  } else if (element.attachEvent) {
    var retVal = element.attachEvent("on"+evType, func);
    return retVal;
  } else {
    return false;
  }
}
window.onload = load;
```

Die return false in myFunction sollen eigentlich, wenn ich Link 1 richtig verstehe, dazu führen das die Action unterdrückt wird. Oder hab ich da irgendwo was falsch verstanden und das an der falschen Stelle gesetzt?  Das Form-Tag hat natürlich die ID "searchform" ... falls jemand sich das fragt. 
Bei meinen ersten Versuchen hab ich das Form-Tag um die Eingabefelder weggelassen und den Absendebutton über die addEvent Funktion mit 'nem onclick-Event versehen. Das funktionierte prima, aber sobald ich die Form-Tags samt action herumbaue klappt nichts mehr (auch bei der onclick-Variante).

Hat jemand vielleicht einen "Tritt" in die richtige Richtung für mich?

Danke schonmal.


----------



## Sven Mintel (17. Januar 2009)

Moin,

das Problem ist, dass der Event nicht auf den Rückgabewert der Funktion wartet, und gecancelt wird, sollte dieser false sein. So würde es bspw. gehen:

```
function addEvent(element, evType, func, useCaption)
{
  element['on'+evType]=function(){return func();};
}
```

Beachte, dass dabei bisherige Eventüberwachungen überschrieben werden und nicht wie in deiner bisherigen Funktion erhalten bleiben.


----------



## shredder01 (17. Januar 2009)

Ah, danke!
Interessant. Hm, eine Möglichkeit die bisherige Funktionsweise trotzdem beizubehalten müßte doch sein zu überprüfen welcher Eventtype übergeben wurde und nur bei submit die Deine Variante einzusetzen, oder?
Also ich sag mal auf die Schnelle so:

```
function addEvent(element, evType, func, useCaption)
{
if(evType=='submit'){
element['on'+evType]=function(){return func();};
}else{
  if (element.addEventListener) {
    element.addEventListener(evType, func, useCaption);
    return true;
  } else if (element.attachEvent) {
    var retVal = element.attachEvent("on"+evType, func);
    return retVal;
  } else {
    return false;
   }
 }
}
```
Na werd' ich morgen (bzw. heute) mal ausprobieren.


----------



## Sven Mintel (17. Januar 2009)

Jo, das wäre eine Möglichkeit 

Flexibler wäre es natürlich, wenn du addEvent einen weiteren Parameter übergibst, der signalisiert, welche Variante zu verwenden ist.


----------



## Quaese (17. Januar 2009)

Hi,

wenn ich nicht völlig falsch liege, sollte deine erste Variante im IE funktionieren.

Für andere Browser, die das Event-Modell Level 2 unterstützen, existiert die Methode *preventDefault* des Event-Objekts. Mit dessen Hilfe kann der Default-Event unterbunden werden.


```
function myFunction(objEvt) {
  if(typeof objEvt.preventDefault == "function")
    objEvt.preventDefault();

  if (1==0) {
   alert('Fehler!');
   return false;
 } else {
   myOtherFunction(blabla);
   return false;
 }
}
```
 
Ciao
Quaese


----------



## shredder01 (17. Januar 2009)

@Quaese: Nö, funktioniert auch im IE nicht, zumindest im 6.0 (wenn Du meine Ausgangsgeschichte meinst). Aber generell finde ich Deinen Vorschlag mit dem preventDefault interessant ... mal schauen was ich dazu noch finde und was sich da machen läßt. Da müßte ich dann den Eventtype in 'ner Variable ablegen, um ihn dann in myFunction weiterverwenden zu können, richtig? Oder woher würde objEvt bei Dir kommen? Klingt jetzt hoffentlich nicht zu blöd die Frage. 
Also um noch mal genauer zu werden, da bin ich mir im Moment noch unsicher wie ich beim Aufruf von myFunction den Eventtype übergebe bzw. wo ich mir in dem Moment den herhole.
Aber ich denke das finde ich schon raus.
@Sven Mintel: Zu Deinem Vorschlag mit dem zusätzlichen Parameter muß ich sagen, da bin ich mir im Moment unsicher für welche weiteren Alternativen das bei mir nützlich sein könnte (da sind wohl meine Kenntnisse noch zu begrenzt )

Danke erstmal wieder an Euch beide für die Tipps.


----------



## Sven Mintel (17. Januar 2009)

shredder01 hat gesagt.:


> @Sven Mintel: Zu Deinem Vorschlag mit dem zusätzlichen Parameter muß ich sagen, da bin ich mir im Moment unsicher für welche weiteren Alternativen das bei mir nützlich sein könnte (da sind wohl meine Kenntnisse noch zu begrenzt )



Naja, da du ja eine Formularüberprüfung vornimmst, könntest du so bspw. Eingaben in Formularfelder prüfen, bevor sie dort erscheinen, z.B. bei Feldern, welche nur Ziffern enthalten dürfen, im vorab verhindern, dass dort etwas anderes als Ziffern eingegeben werden kann.


----------



## shredder01 (17. Januar 2009)

@Sven Mintel: Aber würde so etwas denn generell eine noch andere Art der Eventlistener-Anbindung, als ich bisher in der addEvent-Funktion hab, erfordern?


----------



## Quaese (17. Januar 2009)

Hi,

Browser, die nicht das *window.event*-Objekt unterstützen, erhalten das Event-Objekt als Parameter an den Ereignishandler übergeben. Du kannst das zum Beispiel anzeigen, indem du die Arguementenliste leer lässt und innerhalb des Eventhandlers den Objekttyp des ersten Arguments ausgeben lässt.


```
function myFunction() {
  alert(arguments[0].toString());
}
```
 
Im Übrigen unterbinden bei mir die IEs der Version 6 und 7 (7 unter XP und Vista) das Senden des Formular, wenn ich wie in deinem ersten Post beschrieben vorgehe.

Mein Beispieldokument:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function myOtherFunction(strBlaBla){
  var objElem = document.createElement("div");
  objElem.appendChild(document.createTextNode(strBlaBla));
  document.getElementsByTagName("body")[0].appendChild(objElem);
}

function load() {
  var e = document.getElementById('searchform');
  addEvent(e,'submit',myFunction,false);
}

function myFunction(objEvt) {
  if(typeof objEvt.preventDefault == "function")
    objEvt.preventDefault();

  if (document.getElementById("cbFehler_id").checked) {
   myOtherFunction("Fehler");
   //alert('Fehler!');
   return false;
 } else {
   myOtherFunction("blabla");
   return true;
 }
}

function addEvent(element, evType, func, useCaption){
  if (element.addEventListener) {
    element.addEventListener(evType, func, useCaption);
    return true;
  } else if (element.attachEvent) {
    var retVal = element.attachEvent("on"+evType, func);
    return retVal;
    //return null;
  } else {
    return false;
  }
}

window.onload = load;
 //-->
</script>
</head>
<body>
<form id="searchform" method="post" action="weiterverabeitung.php">
  <p><input type="checkbox" name="cbFehler" id="cbFehler_id" checked="checked">Haken -> Mit Fehler -> nicht senden</p>
  <p><input type="text" name="txtWert" value="Der Wert">
  <input type="submit" name="cmdSenden" value="Senden"></p>
</form>
</body>
</html>
```
 
Ciao
Quaese


----------



## Quaese (17. Januar 2009)

Hi,

zum Thema IE - ich habe nochmal im dicken JS-Buch geblättert und folgendes gefunden:
Über die Eigenschaft *returnValue* des *window.event*-Objekts kann das Ausführen der vordefinierten Aktion unterbunden werden.

Das Senden sollte also wie nachstehend unterbunden werden können.

```
function myFunction(objEvt) {
  if(typeof objEvt.preventDefault == "function")
    objEvt.preventDefault();
  else if(window.event)
    window.event.returnValue = false;

  if(1==0){
   alert('Fehler!');
   return false;
 } else {
   myOtherFunction("blabla");
   return false;
 }
}
```
Ciao
Quaese


----------



## shredder01 (18. Januar 2009)

@Quaese: Vielen Dank für Deine Mühe und die Tipps!
Jetzt funktioniert alles so wie es soll.
Interessant das bei Dir der IE das Senden unterdrückt bei meiner Ausgangsvariante. Bei mir wurde nur jeweils die Action aufgerufen egal in welchem Browser (ok, ich kann im Moment nur IE 6.0, Firefox 3.0 und Safari testen).
Darf ich mal neugierig fragen was für ein JS-Buch Du da hast bzw. ob Du da eins empfehlen kannst? Ich hab nur so'n uraltes, da ich JS immer sehr vernachlässigt habe. Aber irgendwie find' ich JS seit ein paar Monaten jetzt doch ganz spannend ... vor allem wenn's auf "moderne Weise" eingesetzt wird.
Falls es Dich interessiert wofür die ganze Mühe, hier mal 'n Link (allerdings bisher nur 'ne Testseite): http://mobil-im-rollstuhl.de/searchtest.html. Damit was passiert muß im mitteleren Eingabefeld "Greifswald" eingegeben werden (mehr steht noch nicht in der DB ), die linke Kategorieauswahl ist noch uninteressant.


----------



## Quaese (18. Januar 2009)

Hi,

normalerweise schlage ich Hilfe zu JS online nach. SelfHTML ist eine gute Anlaufstelle, aber auch Galileo Computing und die Seiten der Browserhersteller bieten reichlich Informationen. Eine umfangreichere Linkliste findest du auf tutorials.de.

Ansonsten habe ich mal das Buch "JavaScript - Das umfassende Referenzwerk" von David Flanagan als günstiges Mängelwerk erstanden. Damit bin ich äusserst zufrieden.

Ciao
Quaese


----------



## shredder01 (18. Januar 2009)

Ja stimmt, soviel Bücher kann man gar nicht kaufen, um das zu ersetzen was man online findet .
Die Linkliste auf tutorials.de war mir noch gar nicht aufgefallen. Danke für den Hinweis!

Schönen Restsonntag noch und 'ne angenehme Woche.


----------

