使用原型通过Ajax提交表单并更新结果div

Question

I'm wondering how can I submit a form via Ajax (using prototype framework) and display the server response in a "result" div. The html looks like this :

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

I tried to attach a javascript function (which uses Ajax.Updater) to "onsubmit" (on the form) and "onclick" (on the input) but the form is still "non-Ajax" submitted after the function ends (so the whole page is replaced by the results).

Answer 1

Check out Prototype API's pages on Form.Request and Event handling.

Basically, if you have this:

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

Your js would be, more or less:

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

You need to return the value false from the ajax function, which blocks the standard form submit.

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


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

}

Using onsubmit on the form also captures users who submit with the enter key.

Answer 3

You first need to serialize your form , then call an Ajax Updater , using POST options and pass it the serialized form data. The result will then appear in the element you sepcified.

Answer 4

You need to stop the default action of the onsubmit event.

For example:

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

More info on stopping default event behavior in Prototype »