Don't forget the convenience wrapper Form.request, which "hijacks" the
form's default settings and uses them to construct an Ajax request to
the same endpoint using the same protocol. So that means:
<form id="myform" action="myform.php" method="post">
...
</form>
<script ... >
$('myform').observe('submit',function(evt){
evt.stop();
this.request({onSuccess:function(transport){
this.up('div').update(transport.responseText);
}});
});
</script>
And that gets you an unobtrusive enhancement of the vanilla form,
since presumably the handler would spit out a complete page if it
received a vanilla request, and a cut-down fragment if it received an
Ajax request.
Walter
On Aug 18, 2009, at 10:36 AM, T.J. Crowder wrote:
>
> Hi,
>
> 'Tis indeed very easy. Say you have a form wrapped in a div:
>
> <div id='formwrapper'><form>
> ....
> </form></div>
>
> You can post it like so and take the result (which is presumed to be
> an HTML snippet in this case) and use that to update the container:
>
> new Ajax.Updater('formwrapper', someurl, {
> parameters: $('formwrapper').down('form').serialize(true),
> onFailure: function(response) {
> // ...show a failure message...
> }
> });
>
> That uses:
>
> $[1] to find the formwrapper div.
> Element#down[2] to find the form within the wrapper.
> Form#serialize[3] to grab the form fields and make an object out of
> them.
> Ajax.Updater[4] to make the request (by default it uses POST) and
> update the wrapper on success.
>
> [1] http://prototypejs.org/api/utility/dollar
> [2] http://prototypejs.org/api/element/down
> [3] http://prototypejs.org/api/form/serialize
> [4] http://prototypejs.org/api/ajax/updater
>
> You can also do it without wrapping the form in a div, but it's a
> *tiny* bit more work; assuming the form has the ID 'myform' (creative,
> aren't I?):
>
> var form = $('myform');
> new Ajax.Request(someurl, {
> parameters: form.serialize(true),
> onSuccess: function(response) {
> form.insert({below: response.responseText});
> form.remove();
> },
> onFailure: function(response) {
> // ...show a failure message...
> }
> });
>
> Citations for Ajax.Request, Element#insert, and Element#remove are
> left as an exercise for the reader... ;-)
>
> HTH,
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
>
> On Aug 18, 3:09 pm, bill <[email protected]> wrote:
>> I've read the docs, but can't seem to figure out how to POST a form
>> via AJAX.
>> I'm sure it is easy (as most prototype.js function calls are) but
>> how ?
>>
>> I want the reply to update the div that holds the form (which itself
>> was downloaded via AJAX).
>> bill
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
