enviar um formulário via Ajax usando o protótipo e atualizar um div resultado

Question

Eu estou querendo saber como posso enviar um formulário via Ajax (usando o framework protótipo) e exibir a resposta do servidor em um div "resultado". Os olhares html como este:

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

Eu tentei anexar uma função javascript (que usa Ajax.Updater) para "onsubmit" (no formulário) e "onclick" (na entrada), mas a forma ainda é "não-Ajax" apresentados depois das extremidades de função (assim toda a página é substituída pelos resultados).

Answer 1

Confira páginas de Prototype API em Form.Request e Event manipulação.

Basicamente, se você tem o seguinte:

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

Seus js seria, mais ou menos:

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

Você primeiro precisa serialize seu formulário , em seguida, chamar um Ajax Updater , usando opções de Post e passá-lo os dados do formulário serializados. O resultado aparecerá no elemento que você sepcified.

Answer 3

Você precisa retornar o valor falso da função ajax, que bloqueia a forma padrão de submeter-se.

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


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

}

usuários

Usando onsubmit no formulário também captura que apresentarem com a tecla enter.

Answer 4

Você precisa parar a ação padrão do evento onsubmit.

Por exemplo:

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

Mais informações sobre comportamento padrão do evento parando em Prototype »