zuykov/zsite/templates/form_template/product_class.html

{% load cms_tags  djangocms_forms_tags i18n sekizai_tags staticfiles %}

<script type="application/javascript">
var form = {
{% for item in results.form_data %}
        {% if item.label %}
        '{{ item.label }}'
        {% else %}
        '{{ item.name }}'
        {% endif %}
        : { 
            'size': 
            {% if item.value == True %}
            1
            {% elif item.value == False or item.value == None %}
            0
            {% else %}
            {{ item.value|length }}
            {% endif %}
            ,
            'values': '{{ item.value }}'
        },
{% endfor %}
};
</script>

<div class="forms" id="{{ instance.form_id }}">
    {% if instance.title %}
        <h3 class="title">{{ instance.title }}</h3>
    {% endif %}
    {% if instance.description %}
        <div class="description">
            {{ instance.description|safe }}
        </div>
    {% endif %}


    <div class="form-wrapper">
        <form action="{{ form.submission_url }}" method="POST" enctype="multipart/form-data">
            <div class="form-errors" style="display:none;"></div>

            <div id="{{ tabs_list_id }}" ng-tabs class="tabs-plugin service-trademark-product-class">
                <div class="headers">
                    <ul class="tabs-list list-unstyled list-inline">
                        {% for field in form.visible_fields %}
                            {% if field|is_checkboxselectmultiple %}
                                {% if forloop.first %}  
                                    <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#{{ field.id_for_label }}">{{ field.label }}</a></li>
                                {% else %}
                                    <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#{{ field.id_for_label }}">{{ field.label }}</a></li>
                                {% endif %}

                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                <div class="variants">
                {% for field in form.visible_fields %}
                    <div id="{{ field.id_for_label }}" ng-tab-body class="tab-body">
                        {% if field|is_checkboxselectmultiple %}
                            {{ field }}
                        {% endif %}

                    </div>
                {% endfor %}
                </div>
            </div>

            {% for field in form.visible_fields %}
                {% if not field|is_checkboxselectmultiple %}
                    <div class="field-wrapper {{ field|input_class }} {{ field.css_classes }}">
                        <div class="field-errors" style="display:none;"></div>
                        {% if field|is_checkbox %}
                            {{ field }}
                        {% endif %}
                        <label for="{{ field.id_for_label }}">
                            {{ field.label }}
                        </label>
                        {% if field|is_textarea %}
                            <div id="help-text-{{ field.auto_id }}" class="help-text">{{ field.help_text|safe }}</div>
                        {% endif %}
                        {% if not field|is_checkbox %}
                            <p>{{ field }}</p>
                        {% endif %}
                        {% if not field|is_textarea and field.help_text %}
                            <div id="help-text-{{ field.auto_id }}" class="help-text">{{ field.help_text|safe }}</div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}


           
            {% csrf_token %}

            {% for hidden in form.hidden_fields %}
                {{ hidden }}
            {% endfor %}
            <div class="button-wrapper submit">
                <button class="form-button btn btn-primary" type="submit" value="{{ instance.submit_btn_txt }}">{{ instance.submit_btn_txt }}</button>
            </div>
        </form>
    </div>
    <div class="form-success" style="display: none;">
        {% if instance.post_submit_msg %}
            <p>{{ instance.post_submit_msg|safe }}</p>
        {% else %}
            {% blocktrans %}
                <h3>Submission successful</h3>
                <p>Thank You! Your form has been successfully submitted!</p>
            {% endblocktrans %}
        {% endif %}
    </div>
</div>

{% addtoblock "js" %}
    <script src="{% static 'js/djangocms_forms/libs/jquery.form.min.js' %}"></script>
    <script src="{% static 'js/djangocms_forms/djangocms_forms.js' %}"></script>
    <script type="application/javascript">
        $(function() {
           $('.forms').djangocms_forms();

            $(".service-trademarks-class-form input[type=checkbox]").each(function () {
                $(this).change(updateCount);
              });

              updateCount();

              function updateCount () {
                var count = $(".service-trademarks-class-form input[type=checkbox]:checked").size(),
                    scope = angular.element($('.bill')).scope();

                if(count == 0) {
                    if(scope.classes > 0) {
                        count = scope.classes;
                    } else {
                        count = 1;
                    }
                }

                scope.$apply(function () {
                    scope.classes = count;
                    if(scope.classes > 5) {
                        scope.extra_classes = scope.classes - 5;
                    }
                });
              };
        });
    </script>
{% endaddtoblock %}