How to submit form without refreshing page using Django, Ajax, jQuery?
if you are planning to use an ajax submit with jquery you should not return html from your view.. I propose you to do this instead:
html:
<html>
<head>
</head>
<body>
<h1>Leave a Suggestion Here</h1>
<div class="message"></div>
<div>
<form action="" method="post">{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit Feedback" />
</form>
</div>
</body>
</html>
the js
$('#form').submit(function(e){
$.post('/url/', $(this).serialize(), function(data){ ...
$('.message').html(data.message);
// of course you can do something more fancy with your respone
});
e.preventDefault();
});
the views.py
import json
from django.shortcuts import *
from django.template import RequestContext
from linki.forms import *
def advert(request):
if request.method == "POST":
form = AdvertForm(request.POST)
message = 'something wrong!'
if(form.is_valid()):
print(request.POST['title'])
message = request.POST['title']
return HttpResponse(json.dumps({'message': message}))
return render_to_response('contact/advert.html',
{'form':AdvertForm()}, RequestContext(request))
so that way you put the response in the message
div. instead of returning plain html you should return json.
<script type="text/javascript">
$(document).ready(function() {
$('#form_id').submit(function() { // On form submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#success_div').html(response); // update the DIV
},
error: function(e, x, r) { // on error..
$('#error_div').html(e); // update the DIV
}
});
return false;
});
});
</script>