senden eines Formulars per Ajax mit prototype und Aktualisierung Ergebnis div

Frage ich mich, wie kann ich ein Formular Absenden via Ajax (mit prototype framework) und die Anzeige der server-Antwort in ein "Ergebnis" div.
Die html sieht wie folgt aus :

<form id="myForm" action="/getResults">
    [...]
    <input type="submit" value="submit" />
</form>
<div id="result"></div>

Habe ich versucht zu befestigen, eine javascript-Funktion, die verwendet Ajax.Updater) auf "onsubmit" (auf dem Formular) und "onclick" (am Eingang), aber die form ist noch "nicht-Ajax" eingereicht werden, nachdem die Funktion beendet (also die ganze Seite wird ersetzt durch die Ergebnisse).

InformationsquelleAutor Vinze | 2009-01-14
  1. 33

    Check-out-Prototyp, API-Seiten auf Form.Anfrage und Event Handhabung.

    Grundsätzlich, wenn Sie diese:

    <form id='myForm'>
.... fields ....
<input type='submit' value='Go'>
</form>
<div id='result'></div>

    Ihre js wäre, mehr oder weniger:

    Event.observe('myForm', 'submit', function(event) {
    $('myForm').request({
        onFailure: function() { .... },
        onSuccess: function(t) {
            $('result').update(t.responseText);
        }
    });
    Event.stop(event); //stop the form from submitting
});
    • Ich denke diese Antwort ist besser als die Antwort ausgewählt, weil auf diese Weise tun Sie alles, was in der javascript-Seite. Es ist keine Zugabe von onsubmit="return myfunc ()", um die form
    • Konnte nicht mehr Zustimmen Trennung ist entscheidend!
    • N. B. -- Prototyp ist nicht kompatibel mit Datei-uploads Einreichung durch Ajax. Siehe ruby-forum.com/topic/136931 .
    • ein weiterer Hinweis: -- Sie könnten Event.stop() wird zuerst, falls Sie Begegnung eine Ausnahme.
    • Dieser arbeitete für mich. Obwohl, seit ich bin ein absoluter Javascript-newbie, es hat mich einige Zeit zu erkennen, dass, um für diese zu arbeiten. Das javascript angezeigt wird, nachdem die form in meiner Hand, oder nachdem die Gegenstände wurden dynamisch erstellt.
    InformationsquelleAutor Paolo Bergantino
  2. 3

    Müssen Sie zuerst serialisieren Sie Ihre form, dann rufen Sie einen Ajax Updater, mit POST-Optionen und übergeben Sie die serialisierte form der Daten. Das Ergebnis erscheint dann in dem element, das Sie sepcified.

    • Die Art und Weise, dass @Paolo sagte es bereits serialisiert Sie unser Formular aus und senden Sie es.
    InformationsquelleAutor Diodeus - James MacFarlane
  3. 3

    Müssen Sie den Wert false zurück, aus der ajax-Funktion, die Blöcke der standard-form Einreichen.

    <form id="myForm" onsubmit="return myfunc()" action="/getResults">


function myfunc(){
   ... do prototype ajax stuff...
  return false;

    }

    Mit onsubmit auf dem Formular erfasst auch Benutzer, die senden mit der enter-Taste.

    • Ich habe die "return false" in der Funktion, aber mir fehlte die Rückkehr über die Funktion im onsubmit...
    • Getan haben, dass man mich ein paar hundert mal 😉
    InformationsquelleAutor krosenvold
  4. 0

    Müssen Sie stoppen Sie die Standard-Aktion der onsubmit Veranstaltung.

    Beispiel:

    function submit_handler(e){
    Event.stop(e)
}

    Mehr info auf stoppen Standard-event-Verhalten im Prototyp »

    InformationsquelleAutor Triptych
Schreibe einen Kommentar