отправить форму через Ajax с использованием прототипа и обновить результат div

Question

Мне интересно, как я могу отправить форму через Ajax (используя прототип фреймворка) и отобразить ответ сервера в «результате» div. HTML выглядит так:

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

Я попытался прикрепить функцию javascript (которая использует Ajax.Updater) к «onsubmit» (в форме) и «onclick» (для ввода), но форма все еще «не-Ajax», отправленная после завершения функции (поэтому вся страница заменяется результатами).

Answer 1

Проверьте страницы API прототипа при обработке Form.Request и 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 Updater , используя Параметры POST и передать ей сериализованные данные формы. Результат появится в разделенном вами элементе.

Answer 3

Вам необходимо вернуть значение false из функции ajax, которая блокирует отправку стандартной формы.

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


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

}

При использовании onsubmit в форме также фиксируются пользователи, отправившие с помощью клавиши ввода.

Answer 4

Вам необходимо остановить действие по умолчанию для события onsubmit.

Например:

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

Дополнительная информация о остановке поведения события по умолчанию в Prototype"