CODEWITHSUNDEEP
flaskbootstrap-modal
jackpot
jackpot

Reputation: 41

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">&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>

Upvotes: 0

Views: 1486

Answers (2)

jackpot
jackpot

Reputation: 41

@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>
  1. Add onclick for modal button
<button type="button" class="btn btn-success" id="btnConfirm" onclick="form_submit()">Confirm</button>
  1. Add Javascript
function form_submit(){
    // Close the Modal
    $("#updateModal").modal("hide");
            
    // submit it
    document.getElementById("mainForm").submit();
}

Upvotes: 1

NoCommandLine
NoCommandLine

Reputation: 6298

I would approach this a different way

  1. Remove the form in the modal and just have a normal button with an id e.g. id="btnConfirm".

  2. Give your main form an id e.g.

    <form action= "" method="POST", enctype="multipart/form-data" id="mainForm">

  3. 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"))
        });
    })

Upvotes: 0

Related Questions