Modal Form for django

index.html

<button type="button" class="btn btn-success js-create-supplier" data-url="{% url 'supplier:modal-create' %}">
    <span class="glyphicon glyphicon-plus"></span>
    New Supplier
</button>
<div class="modal fade" id="modal-popup" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>


{% block extra_script %}
<script>
        var loadForm = function () {
            var btn = $(this);
            $.ajax({
                url: btn.attr("data-url"),
                type: 'get',
                dataType: 'json',
                beforeSend: function () {
                    $("#modal-popup .modal-content").html("");
                    $("#modal-popup").modal("show");
                },
                success: function (data) {
                    $("#modal-popup .modal-content").html(data.html_form);
                }
            });
        };

  /* Binding */

  // Create book
        $(".js-create-supplier").click(loadForm);
        $("#modal-popup").on("click", "#popup-submit", function(e){
            e.preventDefault();
            var form = $('.popup-form');
            var selector = $(this).attr('data-selector');
            var model_name = $(this).attr('data-model-name');
            $.ajax({
                url: form.attr("action"),
                data: form.serialize(),
                type: form.attr("method"),
                success: function (data) {
                    if (data.form_is_valid) {
                        $("#modal-popup").modal("hide");
                        toastr.success("New "+model_name+" Created!");
                    }
                    else {
                        $("#modal-popup .modal-content").html(data.html_form);
                    }
                }
            });
            return false;
        });
    });

</script>
{% endblock %}

supplier.html

<form method="post" action="{% url 'supplier:modal-create' %}" class="popup-form">
    {% csrf_token %}
    <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">Create Supplier</h4>
    </div>
    <div class="modal-body">
        {% for field in form %}
            <div class="form-group{% if field.errors %} has-error{% endif %}">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                <div class="text-danger">{{ field.errors.as_text|cut:'* ' }}</div>
            </div>
        {% endfor %}
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="popup-submit" class="btn btn-primary" data-model-name="Supplier"
            data-selector="id_supplier">
            Create Supplier
        </button>
    </div>
</form>

views.py

class ModalFormMixin:
    template_name = ''
    form_class = None

    def get(self, request, *args, **kwargs):
        return JsonResponse({'html_form': self.get_html_form(self.form_class())})

    def get_html_form(self, form):
        return render_to_string(self.template_name, {'form': form}, request=self.request)

    def post(self, request, *args, **kwargs):
        form_is_valid = False
        form = self.form_class(self.request.POST)
        if form.is_valid():
            form.save()
            form_is_valid = True
        return JsonResponse(self.get_return_data(form_is_valid, form))

    def get_return_data(self, form_is_valid, form):
        return {
            'html_form': self.get_html_form(form), 'form_is_valid': form_is_valid,
            'id': form.instance.id if form_is_valid else None, 'name': form.instance.name if form_is_valid else None,
        }

class SupplierModalCreateView(ModalFormMixin, View):
    template_name = 'item_code/modals/supplier.html'
    form_class = SupplierModalForm