Блог

Из-за недостатка моих знаний и опыта, как и многие до меня, я борюсь с (вероятно) тривиальной проблемой:

Я пытаюсь запустить модальную форму после отправки формы. это мой код для кнопок:

 <button type="submit" form="url_form" class="btn btn-lg btn-block btn-outline-warning" onclick="document.getElementById('openModal').click();") style="margin-top:10px">Submit triggering modal_btn</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="openModal">Open Modal</button>
                    
 

и отдельно, без моей формы, этот код работает.

Код для моих форм (2-я форма используется только в качестве заполнителя):

 <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        <div class="tab-pane fade show bg-dark text-dark active" id="generete url">
             <form action="{{ url_for('phrase_to_db') }}" method="POST" class="form-signin" style="color:white" id="url_form">

                 {{ url_form.hidden_tag() }}
                 <h3 class="h3 mb-3 font-weight-normal">
                    <br>
                    Please enter Your URL:
                    </h3>
                    <br>
                    {{ url_form.url.label() }}
                    {{ url_form.url(class="form-control", placeholder="Your URL") }}
                    <br>
                    <button type="submit" form="url_form" class="btn btn-lg btn-block btn-outline-warning" onclick="document.getElementById('openModal').click();") style="margin-top:10px">Submit Your URL modal_btn</button>
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#CodeURL" id="openModal">Open Modal</button>
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
            <div class="tab-pane fade show bg-dark text-dark active" id="retrieve_url">
                <form action="{{ url_for('retrieve') }}" method="POST" class="form-signin" style="color:white" id="retrieve_url_form">
                    {{ retrieve_url_form.hidden_tag() }}
                    <h3 class="h3 mb-3 font-weight-normal">
                        <br>
                        Please enter Your Phrase:
                    </h3>
                    <br>
                    {{ retrieve_url_form.phrase.label() }}
                    {{ retrieve_url_form.phrase(class="form-control", placeholder="Your Phrase") }}
                    <br>
                    <!-- <a data-toggle="modal" href="#RetrieveModal" class="btn btn-lg btn-outline-primary">if RetrieveModal click here!</a> -->
                    <button type="button" class="btn btn-lg btn-block btn-outline-info" style="margin-top:10px" data-toggle="modal" data-target="#RetrieveModal" id="reurl">Retrieve Your URL modal_btn</button>
                </form>
            </div>
        </div>
    </div>
 

Если 1-й тип кнопки — «кнопка», отображается модальный, но (очевидно) форма не отправляется, и в БД ничего не отправляется.

Если тип 1-й кнопки — «отправить», форма отправляется, и данные отправляются в БД, но модальная форма не отображается.

2-я кнопка отображается только для тестирования, и он также отлично работает (когда 1-я кнопка type =»submit» и запускается вручную), отображая как данные, которые были отправлены в БД с помощью сообщения об отправке, так и сообщение об успехе.

Я понятия не имею, почему это работает не так, как я хочу. Я буду благодарен за любую помощь.