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

Мне интересно, как я могу отправить форму через Ajax (используя prototype framework) и отобразить ответ сервера в div "result". Html выглядит так:

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

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

8
ajax form-submit javascript prototypejs

4 ответов

Проверьте страницы прототипа 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
});
33

сначала вам нужно сериализовать форму, затем вызвать Ajax Updater, используя параметры POST и передайте ему данные сериализованной формы. Затем результат появится в элементе, который вы разделили.

3

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

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


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

}

использование onsubmit в форме также захватывает пользователей, которые отправляют с ключом enter.

3

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

например:

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

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

0