Trigger a flask WTF SubmitField from a bootstrap 5 modal button - flask

I have created a flask form, embedded in a bootstrap 5 modal. The modal looks like this:
When I click "Weiter" I want to be able to both move to the next modal, and validate and collect the data from the form in my flask form. I can't work out how to create this action with the flask WTF SubmitField. Here is my modal:
<div class="modal fade" id="Modal_1_Toggle" aria-hidden="true" aria-labelledby="Modal_1_ToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Modal_1_ToggleLabel">Stufe 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST" enctype="multipart/form-data">
{{ form_1.csrf_token }}
<p>
{{ form_1.optimise_option.label(class="form-label") }}
{{ form_1.optimise_option(class="form-select form-select-sm") }}
</p>
{{ form_1.submit(class="btn btn-primary") }} <--- THIS IS WHERE I WANT TO TRIGGER THE NEXT MODAL AND RETURN THE FORM DATA
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal">Weiter</button>
^^THIS IS THE BOOSTRAP BUTTON, IDEALLY THIS WOULD BE MY SUBMITFIELD BUTTON
</div>
</div>
</div>
</div>
I thought I might be able pass the bootstrap css variables from the bootstrap button directly to the SubmitField as arguments like this:
{{ form_1.submit(class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal") }}
But it seems this is not possible. Any help would be really appreciated.

Related

Flask Modal Confirm Dialog

I am trying to add a modal dialog to confirm the user's comment. After user finishes editing title and comment then clicks submit button, a modal dialog will pop up for user to confirm. How can I get the data from html after user clicks confirm button on modal?
form.py
class PostForm(FlaskForm):
title_field = StringField('Title')
comment_field = TextAreaField('Comment')
submit = SubmitField('Update')
routes.py
#posts.route('/update_post/<post_id>', methods=['GET', 'POST'])
def post(post_id):
form = PostForm()
post= Post.query.get_or_404(post_id)
if request.method == 'POST':
print(form.title_field.data)
print(form.comment_field.data)
return redirect(url_for('posts.post'))
return render_template('post.html', title='Post', form=form, post=post)
post.html
<!-- form-->
<form action= "" method="POST", enctype="multipart/form-data">
{{ form.hidden_tag() }}
<p></p>
<h4>New Post</h4>
<div class="form-group">
{{ form.title_field.label(class="form-control-label") }}
{{ form.title_field(class="form-control form-control-lg") }} <!-- Pass this data> -->
</div>
<div class="form-group">
{{ form.comment_field.label(class="form-control-label") }}
{{ form.comment_field(class="form-control form-control-lg") }} <!-- Pass this data> -->
</div>
{{ form.submit( class="btn btn-outline-info", data_toggle="modal", data_target="#updateModal") }}
</form>
<!-- Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateModalLabel">New Post?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form action="{{ url_for('post.post', post_id=post.id) }}" method="POST">
<input class="btn btn-success" type="submit" value="Confirm">
</form>
</div>
</div>
</div>
</div>
#NoCommandLine Thanks for the help
This is the final solution I have come out
Change form.submit to a button
<button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#updateModal">Update</button>
Add onclick for modal button
<button type="button" class="btn btn-success" id="btnConfirm" onclick="form_submit()">Confirm</button>
Add Javascript
function form_submit(){
// Close the Modal
$("#updateModal").modal("hide");
// submit it
document.getElementById("mainForm").submit();
}
I would approach this a different way
Remove the form in the modal and just have a normal button with an id e.g. id="btnConfirm".
Give your main form an id e.g.
<form action= "" method="POST", enctype="multipart/form-data" id="mainForm">
When user clicks on the button (confirm), use Javascript to close the modal, and then submit your main form. Sample code (note - this is untested sample code; it might have some bugs)
$("#btnConfirm").on("click", function(){
// Close the Modal
$("#updateModal").modal("hide");
// Get the contents of the main form and submit it
fetch(<URL>, {
method:'POST',
body: new FormData($("#mainForm"))
});
})

Map Bootstrap modal button to Flask WTF submit

I have rendered a form in my Flask web app. For my specific use case, I would like to add a modal dialog window to "confirm" the user's choice. I can get the modal to display, but I can't figure out how to map the "confirm" button (in the modal) to the form action. The examples on the bootstrap docs do not include button mapping in the examples.
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
<unrelated content>
...
</unrelated content>
...
<h4>Enter the email address of the employee receiving the unit</h4>
<div class="col-lg-3">
<div class="row">
<form class="form" id="emailForm" action="{{ url_for('main.transfer', serial=system.serial) }}" method="POST">
{{ mail_form.hidden_tag() }}
{{ mail_form.email }}
{{ mail_form.submit }}<!-- ###THIS IS WHAT I WANT THE MODAL CONFIRM TO TRIGGER -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Transfer
</button>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Unit Transfer</h5>
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>-->
</div>
<div class="modal-body">
You are transferring a unit from {{ system.assignee.email }} to another user. Are you sure?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success success" type="submit" data-target="#emailForm.submit()">Confirm</button>
</div>
</div>
</div>
</div>
How do I tell the modal what I want to happen when the Submit button is clicked? All the documentation I can find talks about putting the entire form inside the modal, and that's not what I want.
Thanks in advance.
Make the following changes,
Change {{ mail_form.submit }} to {{ mail_form.submit(hidden='true', id='form-submit') }} to make the submit button hidden.
Change <button type="button" class="btn btn-success success" type="submit" data-target="#emailForm.submit()">Confirm</button> to <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>
Add the below script after adding the jquery ,
<script>
$('#modal-confirm').click(function(){
// Perform the action after modal confirm button is clicked.
$('#form-submit').click(); // submitting the form
});
</script>
I hope this helps.

Loading form from URL in Bootstrap 3 (Django)

I have a form in a url.
I want to load it in an existing page.
I'm following this tutorial https://www.abidibo.net/blog/2014/05/26/how-implement-modal-popup-django-forms-bootstrap/
This is the form template
{% load i18n widget_tweaks %}
<div class="modal-dialog modal-lg" role="document">
<form action="{% url 'flag_post' %}" method="post" id="flag-form" class="form">{% csrf_token %}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Report Post</h4>
</div>
<div class="modal-body">
{{ form.media }}
{% render_field form.reason class="form-control" %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Save changes" />
</div>
</div><!-- /.modal-content -->
</form>
</div><!-- /.modal-dialog -->
<script>
var form_options = { target: '#modal', success: function(response) {} };
$('#flag-form').ajaxForm(form_options);
</script>
This is my link that is supposed to load the form
<a class="fa fa-pencil" data-toggle="modal" href="{% url 'flag_post' node.uid %}" data-target="#modal" title="edit item" data-tooltip></a> |
I have the following script tag embedded
<script src="http://malsup.github.com/jquery.form.js"></script>
When I call the url directly the form is displayed, but when I try clicking the button form is not loaded.
What is wrong with my code?
Is this the right way to load a form from an external URL?
I didn't have a modal placeholder.
Now I have
Report
Then at the bottom of the page
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
And it works! No JS and no other problems.
Now all I need to do is ajaxify my form submission.
Thanks #Sumeet Kumar
This link helped me
https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url

django bootstrap modal form closes on invalid form data

I am working on django + bootstrap modal where I am rendering ModelForm to the modal dialog.
The problem which I am facing is the modal form closes as soon as I click on submit button, it's showing errors on the modal form but it closes and the errors can be seen when the modal dialog is opened again.
I am not using any javascript or jquery, I am simply using html tag and handling post in the django view.
Please let me know what can be done to stop closing the dialog if the form is invalid.
modaldialog_modelform.html:
this file contain the code of the modal dialog with form which is rendered from view.
<div class="modal fade in" id="NewRecordModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">Add New Transport</h3>
</div>
<div class="modal-body">
<form action="" method="post">{% csrf_token %}
{% if form.errors %}<p class="form_field_error">Please correct the following fields</p>{% endif %}
{{ form|crispy }}
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" alt="Add Transport" value="Add Transport" class="btn btn-primary" />
</div>
</div>
</div>
</div>
the above dialog is called from transport.html with below code:
<a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#NewRecordModalForm" data-backdrop="static">
<i class="fa fa-plus"></i>
</a>
Seems page simply reloading and it's reloading in both cases ... you need ajax request (javaScript code) to your server by clicking on submit button, simplest way to do it using jQuery jQuery AJAX submit form

How to show wtform validation error on modal

I have a WTF Form inside a Twitter Bootstrap 3 modal, which I need to validate. The problem is that the modal closes when the user submits the form, even if there are validation errors. If I click on the button that triggers the modal again, the validation error is displayed. So my question is, how do I get the modal to stay open when there are validation errors?
Thanks!
<button type="button" class="btn btn-default" data-toggle="modal" role="dialog" data-target="#save">
<span class="glyphicon glyphicon-flash"></span>
</button>
<div class="modal fade" id="save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="myModalLabel">Archive List and Start New</h3>
</div>
<form role="form_list" class="form form-medium" action="." method="post">
{{ form_save.csrf_token }}
<div class="modal-body">
<h4>Save list as: </h4>
{{ render_field(form_save.list_name, class="input-large") }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a href="#">
<button class="btn btn-success">Archive List</button></a>
</div>
</form>
</div><!-- modal content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
<script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
You should add some javascript to automatically open the modal when there are errors from the form.
Something like (with jQuery):
var formErrors = {% if form_errors %}true{% else %}false{% endif %};
$(document).ready(function() {
if (formErrors) {
$('.modal').modal('show');
}
});