Created
September 3, 2011 03:31
-
-
Save mkelley33/1190503 to your computer and use it in GitHub Desktop.
django 1.3 ajax contact form post using jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- this will be requested and rendered via ajax so we only want the form fields | |
so we can replace them later using jQuery with the fields PLUS the errors. --> | |
<div id="form-fields"> | |
{{ form.as_p }} | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$().ready(function() { | |
var form = $("#contact-form"); | |
form.submit(function(e) { | |
$("#send-button").attr('disabled', true); | |
$("#wait-message").prepend('<span>Sending message, please wait... </span>'); | |
$.post( | |
form.attr('action'), | |
form.serializeArray(), | |
function(data) { | |
if(data.is_valid){ | |
$("#send-button").hide(); | |
$('#form-fields').empty(); | |
$('#thank-you').html(data.html); | |
} else { | |
$("#send-button").attr('disabled', false); | |
$('#form-fields').html(data.html); | |
} | |
$("#wait-message").empty(); | |
} | |
); | |
e.preventDefault(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form action="{% url main_view %}" method="post" id="contact-form">{% csrf_token %} | |
{% include "djangocontactus/contact-us-fields.html" %} | |
<input type="submit" value="Submit" id="send-button" name="send-button" /> | |
<div id="wait-message"></div> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# -*- coding: utf-8 -*- | |
from django.core.mail import EmailMessage | |
from django.http import HttpResponse | |
from django.shortcuts import render | |
from django.template.loader import render_to_string | |
import simplejson as json | |
from djangocontactus.forms import ContactForm | |
def _send_email(form, template): | |
# The form param should be an instance of form.cleaned_data | |
message_body = render_to_string(template, form) | |
email = EmailMessage( | |
form['subject'], | |
message_body, | |
form['sender'], | |
) | |
email.send() | |
def contact_us(request): | |
template = 'djangocontactus/{0}' | |
if request.method == 'GET': | |
return render( | |
request, | |
template.format('contact-us-form.html'), | |
{'form': ContactForm()} | |
) | |
form = ContactForm(request.POST) | |
if form.is_valid(): | |
_send_email( | |
form.cleaned_data, | |
template.format('email-contact-us.html') | |
) | |
html = render_to_string(template.format('thank-you-message.html')) | |
else: | |
html = render_to_string( | |
template.format('contact-us-fields.html'), | |
{'form': form} | |
) | |
json_dump = json.dumps({'html': html, 'is_valid': form.is_valid()}) | |
return HttpResponse(json_dump, status=200, mimetype='application/json') |
Can you write your form code. Thx. This is very usefull.
Partysun: I'm working on creating a project here on github at the moment that will include the form code. I would put the form code up, but its been changed quite a bit as part of another project and it might not make much sense here. If you create a div around your form fields with id="form-fields", the AJAX goodness should work for whatever fields you're wanting to include. Sorry for any confusion! I'll have a fully-working project up soon :)
hi i am using your code but when form is invalid so is return all fields but not render ReCaptchaField()
i am use ReCaptchaField() in form
how can i render field in template
please help
thanks in advance
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I might make an app for Django out of this one, but for now I'm just sharing the basic stuff I needed to get ajaxified contact form working.