aRZed: Absenden eines generierten Formulars verhindern.

Hallo!

Ich habe mich eben mit DHTML gespielt und wollte einen Text auf der Seite veränderbar machen.

Dazu schrieb ich 2 Funktionen: Eine, die beim Klick den Text durch ein Formular mit Textfeld ersezt:
function text2form() {
  if (clicked) {
    return;
  }
  clicked = true;
  sepp = document.getElementsByTagName('td')[0];
  form = document.createElement("form");
  form.setAttribute("onSubmit", "return form2text();");
  //form.addEventListener("submit", tuihn2, true);
  input = document.createElement("input");
  input.setAttribute("type", "text");
  input.setAttribute("name", "val");
  str = sepp.firstChild.data;
  input.setAttribute("value", str);
  form.appendChild(input);
  sepp.removeChild(sepp.firstChild);
  sepp.appendChild(form);
}

Beim absenden des Formulars wird das Textfeld wieder durch den neuen Inhalt ersetzt:

function form2text() {
  sepp = document.getElementsByTagName('td')[0];
  form = sepp.firstChild;
  str = form.firstChild.value;
  text = document.createTextNode(str);
  sepp.removeChild(form);
  sepp.appendChild(text);
  clicked = false;
  return false;
}

Das ganze Funktioniert auch schon ganz gut - zumindest im Firefox - der IE (6.0) streikt jedoch noch. Er schickt das Formular trotz dem "return false" ab. Gibt es eine andere (zuverlässige) möglichkeit den IE am abschicken des Formulars zu hindern?

Danke schonmal für alle Vorschläge!
grüße
aRZed

  1. Hallo!

    Das ganze Funktioniert auch schon ganz gut - zumindest im Firefox - der IE (6.0) streikt jedoch noch. Er schickt das Formular trotz dem "return false" ab. Gibt es eine andere (zuverlässige) möglichkeit den IE am abschicken des Formulars zu hindern?

    Wie und wo rufst du form2text() auf? Was machst du mit dem Rückgabewert der Funktion?

    mfg
      frafu

    1. Hallo!

      Wie und wo rufst du form2text() auf? Was machst du mit dem Rückgabewert der Funktion?

      ...
      form.setAttribute("onSubmit", "return form2text();");
      ...

      Das sollte inetwa einem:
      <form action="" onSubmit="return form2text();">
        <input type="val" value="bla bla bla" />
      </form>

      entsprechen ...
      oder wenn mans verkürzt und den Funktionsaufruf gleich durch den Rückgabewert ersetzt.:
      <form action="" onSubmit="return false;">
        <input type="val" value="bla bla bla" />
      </form>

      Dieses Formular sollte meines Wissens nie abgesendet werden. So funktioniert das zumindest beim Beispiel "Formulareingaben prüfen" (http://de.selfhtml.org/javascript/beispiele/anzeige/formulareingaben.htm). Wie gesagt sieht es ganz so aus, als würde es für den IE einen unterschied machen ob das Formular per Javascript generiert wird, oder schon als HTML vorhanden ist.

      mfg aRZed

      1. ...
        form.setAttribute("onSubmit", "return form2text();");
        ...

        Das sollte inetwa einem:
        <form action="" onSubmit="return form2text();">
          <input type="val" value="bla bla bla" />
        </form>

        Das Problem neben des unnötigen setAttribute ist, das JS Case sensitive ist und  es sich eingebürgert hat in HTML onEvent zu schreiben. Doch die Event Handler heißen alle onevent

        Struppi.

        1. ...
          form.setAttribute("onSubmit", "return form2text();");
          ...

          Das sollte inetwa einem:
          <form action="" onSubmit="return form2text();">
            <input type="val" value="bla bla bla" />
          </form>

          Das Problem neben des unnötigen setAttribute ist, das JS Case sensitive ist und  es sich eingebürgert hat in HTML onEvent zu schreiben. Doch die Event Handler heißen alle onevent

          Das obige (vereinfachte) Beispiel funktioniert aber wie erhofft.

          Bei meinem Javascript erhalte ich jedoch das selbe Ergebnis auch wenn ich "onsubmit" als attribut setze: Firefox machts - IE nicht. :(

          aRZed

  2. Dazu schrieb ich 2 Funktionen: Eine, die beim Klick den Text durch ein Formular mit Textfeld ersezt:
    function text2form() {
      if (clicked) {
        return;
      }
      clicked = true;
      sepp = document.getElementsByTagName('td')[0];
      form = document.createElement("form");
      form.setAttribute("onSubmit", "return form2text();");
      //form.addEventListener("submit", tuihn2, true);
      input = document.createElement("input");
      input.setAttribute("type", "text");
      input.setAttribute("name", "val");
      str = sepp.firstChild.data;
      input.setAttribute("value", str);
      form.appendChild(input);
      sepp.removeChild(sepp.firstChild);
      sepp.appendChild(form);

    Was nicht notwendig ist, ist diese setAttribute Geschichte
    Das ganze funktioniert zuverlässiger in etwas so:

      
     var sepp = document.getElementsByTagName('td')[0];  
     var form = document.createElement("form");  
     form.onsubmit = {  return form2text();};  
      
    var  input = document.createElement("input");  
    input.type = "text";  
    input.name = "val";  
    str = sepp.firstChild.data;  
    input.value = str;  
      
    form.appendChild(input);  
    sepp.removeChild(sepp.firstChild);  
    sepp.appendChild(form);  
    
    

    Struppi.

    1. Was nicht notwendig ist, ist diese setAttribute Geschichte
      Das ganze funktioniert zuverlässiger in etwas so:

      ...

      form.onsubmit = {  return form2text();};

      ...  
        
      Das scheint mit ein vernünftigerer Ansatz zu sein. Jedoch erhalte ich dabei eine Fehlermeldung:  
        
      Error: invalid property id  
      Source File: http://localhost/test/test.php  
      Line: 35, Column: 23  
      Source Code:  
       formular.onsubmit = { return form2text();};  
        
      Wahrscheinlich hab ich da irgendwas noch nicht so ganz überrissen. Danke auf jeden Fall schonmal für deine Antwort.  
        
      
      >   
      > Struppi.  
        
      grüße  
      aRZed
      
      1. Hallo aRZed

        Was nicht notwendig ist, ist diese setAttribute Geschichte
        Das ganze funktioniert zuverlässiger in etwas so:

        ...

        form.onsubmit = {  return form2text();};

        
        > ...  
        >   
        > Das scheint mit ein vernünftigerer Ansatz zu sein. Jedoch erhalte ich dabei eine Fehlermeldung:  
        >   
        > Error: invalid property id  
        > Source File: http://localhost/test/test.php  
        > Line: 35, Column: 23  
        > Source Code:  
        >  formular.onsubmit = { return form2text();};  
        >   
        > Wahrscheinlich hab ich da irgendwas noch nicht so ganz überrissen. Danke auf jeden Fall schonmal für deine Antwort.  
          
        Nee, ich hab was vergessen:  
          
        form.onsubmit = function() {  return form2text();};  
          
        Struppi.
        
        -- 
        [Javascript ist toll](http://javascript.jstruebig.de/)
        
        1. Nee, ich hab was vergessen:

          form.onsubmit = function() {  return form2text();};

          jajaaa - so geht das!

          Danke auf jeden Fall!!!