Ergebnis 1 bis 2 von 2

Thema: Formulare, Submit und Ajax

  1. #1
    Benutzer Avatar von DaRolla
    Registriert seit
    27.11.2006
    Beiträge
    93

    Cool Formulare, Submit und Ajax

    Hallo,

    ich denke jeder ärgert sich mal wieder mit Formularen rum, also hab ich mal einige Tests gestartet; Firefox 2.0.0.2, IE7 und Opera 9.10.

    HTML-Code:
    <form method="get" action="">
      <input name="name" type="text"/>
      <input name="passwort" type="password"/>
      <input type="submit" value="submit"/>
    </form>
    Das ist wohl das kleinste und bekannteste Formular.

    Sobald man in einem Textfeld Return drückt oder den Submit-Button klickt, wird die Seite aufgerufen und "name" und "password" als Http-Parameter angehangen.

    Will man nun per Javascript an das Submit-Event, geht das so:

    HTML-Code:
    <form method="get" action="" onsubmit="alert('submit gedrückt')">
      <input name="name" type="text"/>
      <input name="passwort" type="password"/>
      <input type="submit" value="submit"/>
    </form>
    Das Problem ist, dass in einer Ajax Umgebung die Html Seite nicht reloadet werden soll.

    Das unterdrückt man so (Danke an Jörchen):

    HTML-Code:
    <form method="get" action="" onsubmit="alert('submit gedrückt'); return(false)">
      <input name="name" type="text"/>
      <input name="passwort" type="password"/>
      <input type="submit" value="submit"/>
    </form>
    Jetzt wollen viele einen Button mit einer Grafik, dafür nimmt man dann keinen <input> sondern einen <button>.

    HTML-Code:
    <form method="get" action="" onsubmit="alert('submit gedrückt')">
      <input name="name" type="text"/>
      <input name="passwort" type="password"/>
      <input type="submit" value="submit"/>
      <button type="button" onclick="alert('button gedrückt')">button</button>  
    </form>
    Interessant wirds nun. Da wir ja einen Button haben, brauchen wir EIGENTLICH den <input type=submit> nicht mehr.

    HTML-Code:
    <form method="get" action="" onsubmit="alert('submit gedrückt')">
      <input name="name" type="text"/>
      <input name="passwort" type="password"/>
      <button type="button" onclick="alert('button gedrückt')">button</button>  
    </form>
    In Opera funktioniert die Möglichkeit, in den Textfeldern Return zu drücken. Es wird also ein Submit-Event getriggert. Nicht so in IE7 oder FF. Dort gibts nun gar kein Submit-Event mehr.

    Will man also einen Button mir Image, würde man das wohl eher so machen:

    HTML-Code:
    <button type="button" onclick="alert('button gedrückt')">
      <img src="loginbutton.gif" width="66" height="74"/>
    </button>
    Da dann aber das Submit-Event in FF und IE7 nicht vorhanden wäre, muss man das wohl in den <input type=submit> stecken.

    HTML-Code:
    <input type="submit" onclick="alert('button gedrückt')">
      <img src="loginbutton.gif" width="66" height="74"/>
    </input>
    Aber das sieht Sch****e aus. Den die Grafik erscheint neben dem Button, auf dem "Anfrage abschicken" steht, wohl ein Default bei FF. Im IE7 lautet die Aufschrift "Anfrage abschicken", in Opera "Senden".

    Diese Default-Beschriftung bekommt man weg mit value="".

    Per Css packen wir nun das Image als Background in das <input type=submit> und haben folgendes Ergebnis:

    HTML-Code:
    <form method="get" action="" onsubmit="alert('submit gedrückt'); return(false)">
      <input name="name" type="text"/>
      <input name="passwort" type="password"/> 
      <input type="submit" value="" style="background-image: url(loginbutton.gif); width:66px; height:74px"/>
    </form>
    Bei Klick auf den Button oder beim Drücken von Return wird "submit gedrückt" per Alert angezeigt. An dieser Stelle kann man nun per Javascript auf bekannte Art und Weise das Formular auswerten (z.B. per Regexe) und/oder einen Ajax Aufruf starten.

    Liebe Grüße
    Marco
    Geändert von der Jörchen (09.03.2007 um 17:08 Uhr) Grund: Ich heiße nicht Jörg :D

  2. #2
    Erfahrener Benutzer
    Registriert seit
    12.04.2006
    Beiträge
    591

    Standard

    Hey Marco,

    schönes 'Tutorial', vielen vielen Dank. Das wird sicher vielen Usern weiterhelfen!!

    Eine Anmerkung habe ich noch zu machen: Im Form-Element würde ich action="" nicht einfach leer lassen. Erstens ist es invalide und zweitens wenn jemand sein JS deaktiviert haben sollte, dann würde das Formular ganz normal abgesendet werden.
    Daher lassen wir uns in action einfach über JS eine leere Rückgabe ausgeben. Dies können wir z.B. mit void 0 bewerkstelligen. Das Leerzeichen kodieren wir zudem valide in %20 um.
    Wenn man nun kein JS aktiviert hat, dann passiert nichts, da es keine valide URL ist, wenn JS aktviert ist, dann hat es keinen weiteren Einfluss.

    Achja, die Klammern nach return kann man zudem weglassen.

    <form method="get" action="javascript:void%200" onsubmit="alert('submit gedrückt'); return false">

    Grüße,
    der Jörchen

Ähnliche Themen

  1. prototype - form - submit
    Von anarkist im Forum Sonstige Probleme
    Antworten: 3
    Letzter Beitrag: 29.11.2006, 08:04
  2. formulare per ajax vom server laden
    Von tcomic im Forum Sonstige Probleme
    Antworten: 6
    Letzter Beitrag: 06.11.2006, 07:15
  3. Formulare und der Pagereload
    Von gala im Forum Sonstige Probleme
    Antworten: 1
    Letzter Beitrag: 29.05.2006, 08:49
  4. Direktes Submit
    Von Banane im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 10.05.2006, 22:05
  5. CSS textarea und submit
    Von Ben im Forum Auszeichnungssprachen
    Antworten: 2
    Letzter Beitrag: 20.04.2006, 15:37

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •