Baba: Formular mit AJAX senden

Liebe Helfer,

ich möchte ein Formular mit Ajax auswerten.
Erster Ansatz:
Formular erstellt,
button eingebaut,
diesem das Event "onclick" mit einer Funktion "SubmitForm()" gegeben.
SubmitForm holt sich die Daten aus dem Formular und sendet sie mittels Ajax an den Server.

Klappt super.

Jetzt wollte ich das ganze nicht mit dem onclick Event eines Buttons machen, sondern mit dem onsubmit-Event des Formulars (wegen Enter-Drückern). Nur dann wird das ganze Formular ja auch an die in action="" angebene Seite gesendet.

Wie kann man das verhindern. Wenn man JQuery verwendet gehts auch irgendwie. Oder geht das so gar nicht.

Wie mach ichs nun??
Cheers,
Baba

  1. Moin!
    Wenn Du das Absenden des Formulars verhindern willst, gib ein false zurueck.

    --
    Signaturen sind blöd!
    1. Wenn Du das Absenden des Formulars verhindern willst, gib ein false zurueck.

      Nicht doch.

      1. Moin!

        Wenn Du das Absenden des Formulars verhindern willst, gib ein false zurueck.

        Nicht doch.

        Aha. Toller Link. Bringt mich weiter auf eine Seite, die eindrucksvoll demonstriert, dass es so nicht funktioniert. Die JS Fehlerkonsole ueberschlaegt sich.

        --
        Signaturen sind blöd!
    2. Moin!
      Wenn Du das Absenden des Formulars verhindern willst, gib ein false zurueck.#

      Das habe ich schon mehrmals gelesen, weiß aber immernoch nicht, wie und wo ich es einsetzen soll.

      Ich hatte es so verstanden, dass folgendes Beispiel niemals den _POST - Wert von "test" zeigen dürfte

        
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
      <html>  
        
      <head>  
      <title>Formular nicht auf herkömmlichen Wege absenden</title>  
      <script type="text/javascript" src="/ajax/AJAXRequest.js"></script>  
      </head>  
        
      <body>  
        
        
      <form action="#" method="post" onsubmit='return false;AJAXRequest();'>  
      <input type="text" name="test" /><br>  
      <input type="submit"/>  
        
      </form>  
        
      <br>  
      <br>  
        
      <?php  
      if(isset($_POST["test"])) echo $_POST["test"];  
      else                      echo "müsste ich nicht immer zu sehen sein?";  
      ?>  
        
        
      </body>  
      </html> 
      

      Allerdings zeigt mir die Seite nach dem ersten Klicken vom submit den Inhalt von _POST["test"].

      Cheers,
      Baba

      1. Hi,

        Wenn Du das Absenden des Formulars verhindern willst, gib ein false zurueck.#

        Das habe ich schon mehrmals gelesen, weiß aber immernoch nicht, wie und wo ich es einsetzen soll.

        Genau so, wie im Beispiel (wo es auch noch mal explizit erklärt wird): http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onsubmit

        <form action="#" method="post" onsubmit='return false;AJAXRequest();'>

        Das ist natürlich falsch, weil ein return-Statement *immer* den aktuellen Arbeitskontext verlässt; AJAXRequest würde hier also nie aufgerufen.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. Jetzt hats geklickt. Vielen Dank.

          Cheers,
          Baba

  2. مرحبا

    Wie kann man das verhindern. Wenn man JQuery verwendet gehts auch irgendwie. Oder geht das so gar nicht.

    Mit JQuery geht's mit .bind(). Damit kannst du das Submit abfangen.

    Bsp.

      
    $('#formular').bind('submit', function() {  
      var data = $(this).serialize();  
      $.post('/ajax.php', data, function(response) {  
        $("#ajax_content").html(response);  
      });  
     return false;  
    });
    

    mfg
    --

    1. Mit JQuery geht's mit .bind(). Damit kannst du das Submit abfangen.

      .on()

      Bsp.

      ein preventDefault() fehlt auch hier (und anders als in "blankem JavaScript" übernimmt jQuery hier, ob return false oder preventDefault() ausgeführt werden muss.

      1. .on()

        fu :)

        1. مرحبا

          .on()

          Danke für den Link.

          Aber was anderes, mein bsp. funktioniert einwandfrei, was kann da schlimmstenfalls passieren?

          mfg

          1. Aber was anderes, mein bsp. funktioniert einwandfrei, was kann da schlimmstenfalls passieren?

            bind() ist deprecated, bei einem Update auf eine neuere Version kann es sein, dass nix mehr geht.

            on() ist zudem flexibler als bind() - on() ersetzt bind(), live() und delegate() und greift somit auch auf Dinge, die erst später ins DOM eingefügt werden.

            Das ist nicht unpraktisch, wenn das Formular z.B. per Ajax in einem Popup geladen wird oder ähnliches.

            1. مرحبا

              on() ist zudem flexibler als bind() - on() ersetzt bind(), live() und delegate() und greift somit auch auf Dinge, die erst später ins DOM eingefügt werden.

              Danke dir für die Info. Genau danach suchte ich selbst schon seit tagen.

              mfg

            2. Hi,

              on() ist zudem flexibler als bind() - on() ersetzt bind(), live() und delegate() und greift somit auch auf Dinge, die erst später ins DOM eingefügt werden.

              Dann finde ich die Doku diesbezüglich aber missverständlich:

              "The .on() method attaches event handlers to the currently selected set of elements in the jQuery object."

              Aber bei .live wird ja noch mal darauf hingewiesen, dass .on es ersetzt.

              Beim überfliegen der Doku finde ich spontan aber keine "opt-out"-Möglichkeit - was ist, wenn ich gar kein "live"-Verhalten will (weil es unter gewissen Umständen auf die Performance gehen kann), kann ich das nicht (mehr) explizit "abbestellen"?

              MfG ChrisB

              --
              RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
              1. on() ist zudem flexibler als bind() - on() ersetzt bind(), live() und delegate() und greift somit auch auf Dinge, die erst später ins DOM eingefügt werden.

                Dann finde ich die Doku diesbezüglich aber missverständlich:

                "The .on() method attaches event handlers to the currently selected set of elements in the jQuery object."

                Kommt drauf an, wie und wo man es aufruft - leider ist die Doku sehr zerpflückt - es steht in der on()-Doku nicht klar was nun was genau tut, da muss man in den Dokuseiten der deprecated-Methoden nachschauen wo das dann erklärt wird.

                Beim überfliegen der Doku finde ich spontan aber keine "opt-out"-Möglichkeit - was ist, wenn ich gar kein "live"-Verhalten will (weil es unter gewissen Umständen auf die Performance gehen kann), kann ich das nicht (mehr) explizit "abbestellen"?

                // live  
                $(document).on(  
                  'click',  
                  '#foo',  
                  function() { }  
                );  
                  
                // bind  
                $('#foo').on(  
                  'click',  
                  function() { }  
                );
                

                Wenn man also das "live"-Verhalten abstellen haben will, nutzt mal "on" mit der delegate()-Syntax, wenn man das bind-Verhalten will, nutzt man die "normale" Syntax die man von bind() oder live() kennt.

                Aber wie oben schon gesagt: die Doku ist sehr leicht misszuverstehen - ggf. hat molily Zeit, sich mal durch den Code zu wursteln, um herrauszufinden, wie es wirklich funktioniert :)

                1. Wenn man also das "live"-Verhalten abstellen haben will, nutzt mal "on" mit der delegate()-Syntax,

                  Das "abstellen" ist hier zu viel :)

                2. Hi,

                  leider ist die Doku sehr zerpflückt - es steht in der on()-Doku nicht klar was nun was genau tut, da muss man in den Dokuseiten der deprecated-Methoden nachschauen wo das dann erklärt wird.

                  Na das wird in Zukunft ja vielleicht noch ein bisschen konsolidiert.

                  // live

                  $(document).on(
                    'click',
                    '#foo',
                    function() { }
                  );

                  // bind
                  $('#foo').on(
                    'click',
                    function() { }
                  );

                  
                  >   
                  > Wenn man also das "live"-Verhalten abstellen haben will, nutzt mal "on" mit der delegate()-Syntax, wenn man das bind-Verhalten will, nutzt man die "normale" Syntax die man von bind() oder live() kennt.  
                    
                  Danke, das Beispiel ist schön anschaulich.  
                    
                  Gehe ich wohl korrekt in der Annahme, dass man dann statt $(document).on() auch $("#someOtherElement").on() nutzen kann, um damit ein "lokal eingeschränktes" .live-Verhalten zu bekommen? Das kann möglichen Performance-Bremsen dann ja wieder einiges ihrer Wucht nehmen.  
                    
                  MfG ChrisB  
                    
                  
                  -- 
                  RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                  
                  1. Gehe ich wohl korrekt in der Annahme, dass man dann statt $(document).on() auch $("#someOtherElement").on() nutzen kann, um damit ein "lokal eingeschränktes" .live-Verhalten zu bekommen?

                    Ja, kann man - das wird auch irgendwo in den Beispielen mit Tabellen angeführt, wenn man z.B. Tabellen hat in denen dynamisch Zeilen dazugeladen werden.

                3. Om nah hoo pez nyeetz, suit!

                  Aber wie oben schon gesagt: die Doku ist sehr leicht misszuverstehen - ggf. hat molily Zeit, sich mal durch den Code zu wursteln, um herrauszufinden, wie es wirklich funktioniert :)

                  Ich will die Zitatesammlung zurrück!

                  Matthias

                  --
                  1/z ist kein Blatt Papier.

      2. Ich benutze kein jQuery! Möcht es in reinem JS haben.
        Vielen Dank für den Hinweis dennoch.
        Cheers,
        Baba

        1. Ich benutze kein jQuery! Möcht es in reinem JS haben.

          preventDefault() für fähige Browser und ein return false; für alle anderen - sagte ich bereits in einem anderen Ast :)

          Die weiche musst du dir aber selbst stricken - jQuery hingegen würde das für dich bereits übernehmen.