Flask 模态确认对话框

Question

我正在尝试添加一个模式对话框来确认用户的评论。用户编辑完标题和评论后点击提交按钮，将弹出一个模态对话框供用户确认。用户单击模态上的确认按钮后，如何从 html 获取数据？

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

我会以不同的方式处理这个问题

删除模式中的表单，只有一个带有 id 的普通按钮，例如id="btnConfirm".
给你的主表单一个id例如

<form action= "" method="POST", enctype="multipart/form-data" id="mainForm">
当用户点击按钮（确认）时，使用Javascript关闭模式，然后提交您的主表单。示例代码（注意 - 这是未经测试的示例代码；它可能有一些错误）

    $("#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"))
        });
    })

Answer 2

@NoCommandLine 感谢您的帮助这是我得出的最终解决方案

将form.submit更改为按钮

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

为模态按钮添加 onclick

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

添加Javascript

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

Flask 模态确认对话框

Flask Modal Confirm Dialog

flask

bootstrap-modal