django - AJAX Form won't update after being submitted -
i have been toubleshooting ajax request contact form. form load field errors ajax request, wont submit form after response. 1 thing note trying submit form button outside form tag, 1 inside tag submits once.
my ajax script:
$('#modal-form').submit(function(e) { e.preventdefault(); var form = $(this); $.ajax({ url: form.attr('action'), type: form.attr('method'), data: form.serialize(), success: function(data) { if (!(data['success'])) { // here replace form, form.replacewith(data['form_html']); $('#modal-form').off("submit"); } else { // here can show user success message or whatever need $('#mymodal').modal("hide"); } }, error: function () { $('#error-div').html("<strong>error</strong>"); } }); });
my form:
{% load crispy_forms_tags %} <div class="container"> <!-- modal --> <div class="modal fade container-fluid" id="mymodal" role="dialog"> <div class="modal-dialog"> <!-- modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4><span class="glyphicon glyphicon-envelope"></span> email me</h4> <div id="success-div"></div> </div> <div class="modal-body"> <div class="row-fluid"> <div id="form"> <form id="modal-form" class="form-horizontal" method="post" action="{% url 'emailme_success' %}"> {% csrf_token %} {% crispy emailme_form emailme_form.helper %} </form> </div> </div> </div> <div class="modal-footer"> <div id="error-div" class="pull-left"> </div> <button name="submit" type="submit" class="btn btn-success pull-right" id="modal-submit" form="modal-form"><span class="glyphicon glyphicon-send"></span> send</button> </div> </div> </div> </div> </div>
Comments
Post a Comment