Barolina
9/8/2016 - 11:46 AM

Django bootstrap AJAX form

Django bootstrap AJAX form

#-*- coding: utf-8 -*-
from django.core.mail import send_mail
from django.http import HttpResponseBadRequest, HttpResponse
from django.shortcuts import render
from django.utils.simplejson import dumps
from livesettings import config_value
from orderdesign.forms import OrderDesignForm


def order_design(request):
    if request.is_ajax():
        if request.method == 'POST':
            form = OrderDesignForm(request.POST)
            if form.is_valid():
                form.save()
                message = unicode(u'Заказ дизайна: ' + unicode(form.cleaned_data['phone']))
                admin_emails = config_value('Account','ADMINS')

                send_mail(u'Заказ дизайна', message, 'info@villaint.ru', admin_emails, fail_silently=True)
                json_data = {'code': '1', 'message': 'Заявка принята. Мы свяжемся с вами в ближайшее время'}
            else:
                json_data = {'code': '0', 'errors': form.errors}
            return HttpResponse(dumps(json_data), mimetype='application/json')
        else:
            form = OrderDesignForm()
    else:
        return HttpResponseBadRequest("Bad request")
    return render(request, 'orderdesign/form.html', {'form': form})
{% load widget_tweaks %}

<div class="modal in" id="application" style="display: block; ">
    <div class="modal-header">
        <a class="close tdn " data-dismiss="modal">×</a>
        <h1>Заявка на дизайн</h1>
        <small>все поля обязательны</small>
    </div>
    <div class="modal-body">
        <form class="form-full" id="orderdesignform" action="{% url orderdesign %}">
            {% csrf_token %}
            <div class="control-group">
                <div class="controls{% if form.name.errors %} error{% endif %}">
                    {% for error in form.name.errors %}
                        <span class="help-inline">{{ error }}</span>
                    {% endfor %}
                    {% render_field form.name placeholder="Ваше имя" %}
                </div>
            </div>
            <div class="control-group">
                <div class="controls{% if form.email.errors %} error{% endif %}">
                    {% for error in form.email.errors %}
                        <span class="help-inline">{{ error }}</span>
                    {% endfor %}
                    {% render_field form.email placeholder="Электропочта" %}
                </div>
            </div>
            <div class="control-group">
                <div class="controls{% if form.phone.errors %} error{% endif %}">
                    {% for error in form.phone.errors %}
                        <span class="help-inline">{{ error }}</span>
                    {% endfor %}
                    {% render_field form.phone placeholder="Телефон" %}
                </div>
            </div>
            <div class="control-group">
                <div class="controls{% if form.description.errors %} error{% endif %}">
                    {% for error in form.description.errors %}
                        <span class="help-inline">{{ error }}</span>
                    {% endfor %}
                    {% render_field form.description rows="4" placeholder="А здесь нужно кратко описать, то что вы хотите от нас получить" %}
                </div>
            </div>
            <div class="w-50 right">

                <div class="control-group">
                    {{ form.captcha.label_tag }}
                    <div class="controls{% if form.captcha.errors %} error{% endif %}">
                        {% for error in form.captcha.errors %}
                            <span class="help-inline">{{ error }}</span>
                        {% endfor %}
                        {{ form.captcha }}
                    </div>
                </div>
            </div>
            <button href="#" class="btn btn-danger w-100 inBorder-box size-20" type="submit">Отправить</button>
        </form>
    </div>
</div>
// Для отправки вормы использовать jQuery ajax forms (http://jquery.malsup.com/form/)
// Показывает ошибки формы
function show_form_errors(form, error_json)
{
    clear_form_errors(form);
    for (name in error_json) {
        var elem = form.find('input[name=' + name + '], textarea[name=' + name + ']');
        elem.closest('.control-group').addClass('error');
        elem.parent().prepend($('<span class="help-inline">*' + error_json[name] + '</span>'));
    }
}

// Очистка формы от ошибок
function clear_form_errors(form)
{
    form.find("span.help-inline").remove();
    form.find('.control-group').removeClass('error');
}


// AJAX подгрузка модальных формы
($("a[data-toggle=modal]")).click(function() {
    if ($(this).hasClass('js_ajax')) {
        var target, url;
        target = ($(this)).attr('data-target');
        // очищаем контейнер модального окна при закрытии
        $(target).on('hidden', function() {
            $(this).html('');
        });

        url = ($(this)).attr('data-href');
        $('body').activity();

        return $(target).load(url, function() {
            $('body').activity(false);
        });
    }
});