プロトタイプを使用してAjax経由でフォームを送信し、結果divを更新します

Question

（プロトタイプフレームワークを使用して）Ajaxを介してフォームを送信し、「結果」にサーバーの応答を表示するにはどうすればよいのでしょうか。 div。 htmlは次のようになります。

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

「onsubmit」にjavascript関数（Ajax.Updaterを使用）を添付しようとしました。 （フォーム上）および＆on; onclick＆quot; （入力上）が、フォームはまだ「非Ajax」です。関数の終了後に送信されます（したがって、ページ全体が結果に置き換えられます）。

Answer 1

Form.Request のPrototype APIのページをご覧ください。および Event の処理。

基本的に、これがある場合：

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

あなたのjsは多かれ少なかれ：

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
});

Answer 2

最初にフォームをシリアル化する必要があり、次に Ajaxアップデータ、 POSTオプションを使用して、シリアル化されたフォームデータを渡します。結果は指定した要素に表示されます。

Answer 3

標準フォーム送信をブロックするajax関数から値falseを返す必要があります。

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


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

}

フォームでonsubmitを使用すると、Enterキーで送信するユーザーもキャプチャされます。

Answer 4

onsubmit イベントのデフォルトアクションを停止する必要があります。

例：

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

Prototypeでのデフォルトイベント動作の停止＆＃187;