Блог

Кнопка отправки Html отлично работала до добавления скрипта jquery. Но когда я добавляю скрипт jquery в академическую информацию пользователя, кнопка отправки html не работает. Этот шаблон действительно работал в django. я добавил jquery в id =»form_set», и когда я также добавляю style =»display: none» в id = «empty_form», кнопка отправки не работает

Вот html-код:

 {% extends 'base/base.html' %} {% load static %} {% block content %}
<div class="card">
    <form class="form-horizontal" action="/" method="post">
        {% csrf_token %}
        <div class="card-header">
            <strong class="icon-user"> User Basic Information</strong>
            <hr class="divider" />
        </div>

        <div class="card-body">
            <div class="form-horizontal">
                {% for field in employ_basic_forms %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                    <div class="col-md-9">{{ field }}</div>
                </div>
                {% endfor %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"><h6>Select Employ Designation:</h6></label>
                    {% for field in user_role %}
                    <div class="col-md-9">{{ field }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="card-header">
            <strong class="icon-book"> User Academic Information</strong>
            <hr class="divider" />
        </div>
        <div class="card-body">
            <div class="card-body">
                <div class="form-horizontal">
                    {{ employAcademicFormSet.management_form }}
                    <div id="form_set">
                        {% for form in employAcademicFormSet %} {% for field in form.visible_fields %}
                        <table class="no_error">
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                                <div class="col-md-9">{{ field }}</div>
                            </div>
                        </table>

                        {% endfor %} {% endfor %}
                    </div>
                    <input type="button" value="Add More" id="add_more" />
                    <div id="empty_form" style="display: none;">
                        {% for form in employAcademicFormSet %} {% for field in form.visible_fields %}
                        <table class="no_error">
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                                <div class="col-md-9">{{ field }}</div>
                            </div>
                        </table>
                        {% endfor %} {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <div class="card-header">
            <strong class="icon-home"> User Home Information</strong>
            <hr class="divider" />
        </div>
        <div class="card-body">
            <div class="form-horizontal">
                {% for field in employ_address_forms %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                    <div class="col-md-9">{{ field }}</div>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="card-header">
            <strong class="icon-key"> Employ User Password</strong>
            <hr class="divider" />
        </div>
        <div class="card-body">
            <div class="form-horizontal">
                {% for field in employ_password_forms %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"><h6>{{ field.label_tag }}</h6></label>
                    <div class="col-md-9">{{ field }}</div>
                </div>
                {% endfor %} {% if errors %}
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="text-input"></label>
                    <div class="col-md-9 text-danger">* {{ errors }}</div>
                </div>
                {% endif %}
            </div>
        </div>
        <div class="card-footer">
            <button class="btn btn-lg btn-primary" type="submit">Submit</button>
        </div>
        <script>
            $("#add_more").click(function () {
                var form_idx = $("#id_form-TOTAL_FORMS").val();
                $("#form_set").append(
                    $("#empty_form")
                        .html()
                        .replace(/__prefix__/g, form_idx)
                );
                $("#id_form-TOTAL_FORMS").val(parseInt(form_idx)   1);
            });
        </script>
    </form>
</div>
{% endblock %}
  

почему эта проблема? пожалуйста, помогите мне решить проблему

Я решил эту проблему. Если я удалю style=»display: none;» из <div id="empty_form" style="display: none;"> или просто изменю <div> на <tbody> , проблема будет решена…