Forms: AJAX POST

[Cristián Vargas]

Hi!

Is there a way to make an AJAX POST to a Wagtail form? 

I have a contact form at mydomain.com/contact/ that I wish to POST from another page.

I think that maybe overriding serve() method could do the trick, but I don't get how to populate the form.

BTW thanks very much to all the dev team of Wagtail, it's a really nice software : )

Greets!

[mat...@torchbox.com]

Hi Cristián,

You make an AJAX request to a Wagtail form the same way you'd make an AJAX POST to any other URL - using something like $.POST(url, {'field1': 'data1', 'field2': 'data2'}) (assuming you're using jQuery).

What exactly do you need to know - how to display the form on another page? How to transfer the data from that form to the AJAX request? How to send a non-HTML response back from the form?

(Perhaps it would be worth sharing the code you've got so far?)

Cheers,

- Matt

--
You received this message because you are subscribed to the Google Groups "Wagtail support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wagtail+u...@googlegroups.com.
To post to this group, send email to wag...@googlegroups.com.
Visit this group at http://groups.google.com/group/wagtail.
To view this discussion on the web, visit https://groups.google.com/d/msgid/wagtail/c75facfe-8beb-4fa4-a7d5-9a2ccc18ee6e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Cristián Vargas]

Hi Matt, thanks for your reply.

What I exactly need to know is how to send a non-HTML response back from the form.

Right now all the responses from the form gets a code 200, even if there are some backend validation errors.

My code so far:

The form model, created at mydomain.com/form/

class MyFormField(AbstractFormField):
    page = ParentalKey('MyForm', related_name='form_fields')


class MyForm(AbstractForm):
    intro = RichTextField(blank=True)
    answer = RichTextField(blank=True)


MyForm.content_panels = [
    FieldPanel('title', classname="full title"),
    FieldPanel('intro', classname="full"),
    InlinePanel('form_fields', label="Fields"),
    FieldPanel('answer', classname="full"),
]

The ajax request:

function post_form (name, email) {
$.ajax({
 url: '/form/',
 type: 'POST',
 data: {name: name, email: email},
})
.done(function(data) {
 var response=$(data);
 console.log("success");
})
.fail(function() {
 console.log("error");
})
.always(function() {
 console.log("complete");
});
 
}

Im using the standard Django code for adding the CSRF token as request header in every ajax POST.

Cheers,

Cristián

[Brett Grace]

You can indeed override the serve method and check if the request is a GET or POST. If you don't do all that, the same code is invoked regardless of the request type (unless I'm misremembering). In your serve method, if you detect that the type is a POST, you're responsible for preparing and returning the request object (e.g., JSONResponse or whatever you need to do). Take a look at the source code for the Page object, it is pretty clear and will help you understand the page lifecycle better.

I generally try to avoid overriding the serve method to handle different types of requests though. For non-Ajax, my preferred pattern for this sort of thing is to POST to a url that is outside of the CMS, handling it with Plain Old Django (nothing Wagtail specific) and then redirect back to the page to display confirmation/errors/etc. Usually I handle all form submissions as Ajax though, and for this I use Django Rest Framework (now an optional dependency I believe?), even for simple stuff like contact forms.