Formular bei onsubmit action unterdrücken

S

shredder01

Mitglied
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:
Code: 
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.
 
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:
Code: 
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.
 
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:
Code: 
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.
 
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.
 
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.

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

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

Ciao
Quaese
 
@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.:confused:
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.
 
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 ;))
Zum Vergrößern anklicken....

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.
 
@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?
 
Zuletzt bearbeitet:
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.

Code: 
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:
Code: 
<!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
 
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.
Code: 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück