Вызов кнопки отправки Flask-Wtform в Javascript

Вызов кнопки отправки Flask-Wtform в Javascript

Я пытался настроить многошаговую форму в своем приложении Flask.

Я нашел этот учебник на w3schools, который был очень полезен: https://www.w3schools.com/howto/howto_js_form_steps.asp

С несколькими изменениями в коде форма отображается правильно, как показано в руководстве.

Мой код выглядит примерно так:

HTML:

 {amp}lt;form method="POST" name="register_workplace_form", name="form" class="regForm" id="regForm" action="/"{amp}gt; {{ form.hidden_tag() }} {amp}lt;div class="form-group"{amp}gt; {amp}lt;h3 class="form_labels"{amp}gt;{{ _('Register Workplace') }} {amp}lt;/h3{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group tab"{amp}gt; {{render_field_with_errors(form.name, class='form-control',placeholder='Name of Workplace') }} {amp}lt;/div{amp}gt; . . .Several other 'form-group tab' divs . . {amp}lt;div style="overflow:auto;"{amp}gt; {amp}lt;div style="float:right;"{amp}gt; {amp}lt;button type="button" id="prevBtn" onclick="nextPrev(-1)" class="btn btn-primary"{amp}gt;Previous{amp}lt;/button{amp}gt; {amp}lt;button type="button" id="nextBtn" onclick="nextPrev(1)" class="btn btn-primary"{amp}gt;Next{amp}lt;/button{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;div class="col-md-12 " id="final"{amp}gt; {{ form.submit(class='btn btn-primary pull-left final') }} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

JAVASCRIPT:

 var currentTab = 0; showTab(currentTab); function showTab(n) { var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; } if (n == (x.length - 1)) { document.getElementById("nextBtn").style.display = "none"; document.getElementById("final").style.display = "inline"; {amp}lt;!--document.getElementById("nextBtn").innerHTML = "Submit";--{amp}gt; } else { document.getElementById("final").style.display = "none"; document.getElementById("nextBtn").style.display = "inline"; } // ... and run a function that displays the correct step indicator: fixStepIndicator(n) } function nextPrev(n) { // This function will figure out which tab to display var x = document.getElementsByClassName("tab"); // Exit the function if any field in the current tab is invalid: if (n == 1 {amp}amp;{amp}amp; !validateForm()) return false; // Hide the current tab: x[currentTab].style.display = "none"; // Increase or decrease the current tab by 1: currentTab = currentTab   n; // if you have reached the end of the form... : if (currentTab {amp}gt;= x.length) { //...the form gets submitted: document.getElementById("regForm").submit(); return false; } // Otherwise, display the correct tab: showTab(currentTab); } function validateForm() { var x, y, i, valid = true; x = document.getElementsByClassName("tab"); y = x[currentTab].getElementsByTagName("input"); for (i = 0; i {amp}lt; y.length; i  ) { if (y[i].value == "") { y[i].className  = " invalid"; valid = false; } } // If the valid status is true, mark the step as finished and valid: if (valid) { document.getElementsByClassName("step")[currentTab].className  = " finish"; } return valid; } function fixStepIndicator(n) { // This function removes the "active" class of all steps... var i, x = document.getElementsByClassName("step"); for (i = 0; i {amp}lt; x.length; i  ) { x[i].className = x[i].className.replace(" active", ""); } //... and adds the "active" class to the current step: x[n].className  = " active"; } 

И мои views.py

 @public.route('/', methods = ['GET','POST']) def index(): form = workplaceForm() if request.method == 'POST' and form.validate(): workplace = Workplace(  name=form.name.data,created_at=datetime.now(),status='active') db.session.add(workplace) db.session.commit flash('You have successfully registered your workplace, pending registration fee payment.') return render_template('index.html', form = form) 

Однако по какой-то причине кнопка «Отправить» на последней вкладке не работает, при нажатии она не выполняет никаких действий.

Я попытался изменить его на простую кнопку внутри тегов ввода, а также вернуть его к исходному коду w3school с похожими результатами.

Что я должен сделать по-другому, чтобы это исправить?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector