Flask Modal Confirm Dialog

Question

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">&times;</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>

Answer 1

@NoCommandLine Thanks for the help This is the final solution I have come out

1. Change form.submit to a button

<button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#updateModal">Update</button>

2. Add onclick for modal button

<button type="button" class="btn btn-success" id="btnConfirm" onclick="form_submit()">Confirm</button>

3. Add Javascript

function form_submit(){
    // Close the Modal
    $("#updateModal").modal("hide");
            
    // submit it
    document.getElementById("mainForm").submit();
}