jquery repeater prevent form to submit

31 Views Asked by At

I use form repeater liberary with Flask and when i add code to duplicate input, when I try to submit but submitting does not work .it seems to make prevent default.

How can I solve this issue as I tried several solutions and same issue still exists. when I remove class form-repeater or remove repeaters fields it works good here is my code

{% extends "index.html" %}
{% block content %}
<div class="row">
    <!-- FormValidation -->
    <div class="col-12">
        <div class="card">
            <h5 class="card-header">{{pagetitle.split('|')[1]}}</h5>
            <div class="card-body">
                <form id="formValidationExamples"  class="row g-3 form-repeater "  method="POST" enctype="multipart/form-data">
                    <!-- Account Details -->
                    {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                    {% for category, message in messages %}
                    <div class="alert alert-{{category}} text-center">
                        {{message}}
                    </div>
                    {% endfor %}
                    {% endif %}
                    {% endwith %}
                    {{form.hidden_tag()}}
                    {%if form.errors%}
                    <div class="alert alert-danger" role="alert">
                        {% for field, errors in form.errors.items() %}
                        {{ ', '.join(errors) }} <br>
                        {% endfor %}
                    </div>
                    {%endif%}
                    <div class="col-md-12">
                        {{form.title.label(class_=('form-label'))}}
                        {{form.title(class_="form-control")}}
                    </div>
                    <div class="col-md-12">
                        {{form.slug.label(class_=('form-label'))}}
                        {{form.slug(class_="form-control")}}
                    </div>
                    <div class="col-md-12">
                        <label class="form-label" for="bs-validation-upload-file">Presntaion Main Image</label>
                        <div class="mb-3">
                            {{form.image(class_="form-control")}}
                        </div>
                    </div>
                    <div class="col-md-12">
                        {{form.description.label()}}
                        {{form.description(class_="form-control")}}
                    </div>
                    <div class="col-md-12">
                        <label class="form-label" for="bs-validation-upload-file">Presntaion  Images</label>
                        <div class="mb-3">
                            {{ form.images(class_="form-control") }}<br>
                        </div>
                        <!--
                            <label class="form-label" for="bs-validation-upload-file">Presntaion  Videos</label>
                            <div class="mb-3">
                              {{ form.videos(class_="form-control") }}<br>
                            
                            </div>
                                
                            -->        
                        <!-- Form Repeater -->
                        <div data-repeater-list="group-a">
                            <div data-repeater-item>
                                <div class="row">
                                    <div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
                                        <label class="form-label" for="form-repeater-1-1">Username</label>
                                        <input type="text" id="form-repeater-1-1" class="form-control" placeholder="john.doe" />
                                    </div>
                                    <div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
                                        <label class="form-label" for="form-repeater-1-2">Password</label>
                                        <input
                                            type="password"
                                            id="form-repeater-1-2"
                                            class="form-control"
                                            placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                                    </div>
                                    <div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
                                        <label class="form-label" for="form-repeater-1-3">Gender</label>
                                        <select id="form-repeater-1-3" class="form-select">
                                            <option value="Male">Male</option>
                                            <option value="Female">Female</option>
                                        </select>
                                    </div>
                                    <div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
                                        <label class="form-label" for="form-repeater-1-4">Profession</label>
                                        <select id="form-repeater-1-4" class="form-select">
                                            <option value="Designer">Designer</option>
                                            <option value="Developer">Developer</option>
                                            <option value="Tester">Tester</option>
                                            <option value="Manager">Manager</option>
                                        </select>
                                    </div>
                                    <div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
                                        <button class="btn btn-label-danger mt-4" data-repeater-delete>
                                        <i class="ti ti-x ti-xs me-1 data-repeater-delete"></i>
                                        <span class="align-middle">Delete</span>
                                        </button>
                                    </div>
                                </div>
                                <hr />
                            </div>
                        </div>
                        <div class="mb-0">
                            <button class="btn btn-primary" data-repeater-create>
                            <i class="ti ti-plus me-1"></i>
                            <span class="align-middle">Add</span>
                            </button>
                        </div>
                        <!-- /Form Repeater -->
                        </br>
                        <div class="col-12">
                            <button type="submit" name="submitButton" class="btn btn-primary">Add Presentation</button>
                        </div>
                </form>
                {{ ckeditor.load() }}
                {{ ckeditor.config(name='description')}}
                </div>
            </div>
        </div>
        <!-- /Form Repeater -->
        <!-- /FormValidation -->
    </div>
</div>

<script src=" {{ url_for('static', filename='backend/assets/vendor/libs/jquery-repeater/jquery-repeater.js') }}"></script>
<script></script>
{% endblock %}
<!--
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{category}} text-center">
    {{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
0

There are 0 best solutions below