CODEWITHSUNDEEP
javascriptajaxprototypejsform-submit
Vinze
Vinze

Reputation: 2539

submit a form via Ajax using prototype and update a result div

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).

Upvotes: 8

Views: 40190

Answers (4)

Kenan Banks
Kenan Banks

Reputation: 212058

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 »

Upvotes: 0

Paolo Bergantino
Paolo Bergantino

Reputation: 488534

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

Upvotes: 33

krosenvold
krosenvold

Reputation: 77191

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.

Upvotes: 3

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

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.

Upvotes: 3

Related Questions