Template source: _support_form.html

{% load i18n crispy_forms_filters %} <div class="modal fade" id="modal-support" role="dialog" aria-labelledby="modal-supportLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="modal-supportLabel">Send Support Request</h4> </div> <form id="support-form" action="{% url 'send_support_request' %}" method="post">{% csrf_token %} <div class="modal-body "> {% blocktrans %}<p> You can fill all fields about your support request and add more details in the description in order to help you fastly</p>{% endblocktrans %} {{ form|crispy }} </div> <div class="modal-footer"> <input id="support-form-btn" type="submit" class="btn btn-primary modal-body" value="{% trans 'Submit' %}"/> <div class="support_form_success " style="display: none"> <p class="text-success"> {% trans 'Your message was successfully sent . <br/> We will respond shortly.' %} </p> </div> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var $form = $('#support-form'); var $form_submit_btn = $('#support-form-btn'); var $form_close_btn = $('button.close'); var $success_message = $('.support_form_success'); var $modal_form = $('.modal-body'); $("#modal-support").hide(); $('.form-group').each(function () { var $container = $(this).prop('id').split('_').slice(2).join('_'); $(this).append('<span class="ajax_error" id="error_'+$container+'"></span>'); }); $( "#modal-support" ).on('show.bs.modal', function (event) { empty_fields($form); $success_message.hide(); $modal_form.show(); $('#id_url').val(window.location.href); }); $form.submit(function (event) { event.preventDefault(); var url = $('#id_url').val(); console.log(url); $.post("{% url 'send_support_request' %}", $form.serialize(), function (res) { if (res['result'] == 'success') { /** RESET FORM **/ {# empty_fields($form);#} remove_fields_errors($form); $success_message.show(); $modal_form.hide(); $( "#modal-support" ).fadeOut( 2000, function() { $(this).modal('hide'); }); console.log('Success'); } else { remove_fields_errors($form); display_fields_errors(res['message'], $form); console.log('Errors'); } } ); }); function display_fields_errors(messages, container) { Object.keys(messages).forEach(function (k) { container.find('#error_' + messages[k][0]).html(messages[k][1]); }); } function remove_fields_errors(container) { container.find('.ajax_error').each(function (k, v) { $(this).html(''); }); } function empty_fields(container) { container.find('input[type="text"], input[type="email"], textarea').each(function () { $(this).val(''); }); } function reset_form(container, success_zone) { remove_fields_errors(container); empty_fields(container); if (success_zone.length) { success_zone.show(); } } }); </script>