如何将 django 表单与同一页面上的另一个表单（在模式之外）放在引导模式上？答案

【问题标题】：How to put a django form on a bootstrap modal with another form on the same page (outside the modal)?如何将 django 表单与同一页面上的另一个表单（在模式之外）放在引导模式上？
【发布时间】：2015-11-09 10:39:48
【问题描述】：

我尝试使用 django & bootstrap 建立一个网站，在其中一个页面中我有两种形式，一种是在帖子中添加评论，另一种是与我联系，联系表在引导模式上。如何使用基于功能的视图将联系表单放入模态？

views.py

def GameView(request, slug):
    game = GameUpload.objects.get(slug=slug)
    comment_form = CommentForm()
    contact_form = ContactForm()
    if request.method == "POST":
        if request.POST['form-type'] == u'comment-form':
            comment_form = CommentForm(request.POST)
            if comment_form.is_valid():
                instance = form.save(commit=False)
                instance.upload = game
                instance.save()
        else:
            contact_form = ContactForm(request.POST)
            #Send mail to me
    context = {"game": game,
               "comment_form": comment_form,
               "contact_form": contact_form,
               "comments": game.comment_set.all().order_by("-date")}
    return render(request, 'game.html', context)

模板

<div class="jumbotron">
    <div class="container">
        <div class="col-sm-8 col-sm-offset-2">
            <h3><i class="fa fa-comment"></i> Add Comment:</h3>
            <form method="POST">
                {% csrf_token %}
                {{ comment_form|crispy }}
                <input type="hidden" name="form-type" value="comment-form" />
                <input type="submit" value="Submit" class="btn btn-primary" />
            </form>
        </div>
    </div>
</div>

模态：

<div id="contact" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Contact Me</h4>
            </div>
            <div class="modal-body">
                <form method="POST" action="/">
                    {% csrf_token %}
                    {{ contact_form|crispy }}
                    <input type="hidden" name="form-type" value="contact-form" />
                </form>
            </div>
            <div class="modal-footer">
                <input type="submit" value="Send" class="btn btn-success" />
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： python django django-forms django-views

【解决方案1】：

模型提交按钮应该在表单标签内

<div id="contact" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Contact Me</h4>
            </div>
            <div class="modal-body">
                <form method="POST" action="/">
                    {% csrf_token %}
                    {{ contact_form|crispy }}
                    <input type="hidden" name="form-type" value="contact-form" />
                    <!--- Here --- >
                    <input type="submit" value="Send" class="btn btn-success" />
                </form>
            </div>
            <div class="modal-footer">
                <!-- The Line was here -->
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

【讨论】：

好吧，我没注意到，但是，在您按下按钮后，模式关闭，您需要重新打开它才能看到您没有填写所有字段
这是因为页面重新加载。如果要验证表单，则需要使用 Ajax。
另外，请查看stackoverflow.com/questions/11276100/…
那里的两种解决方案都不适合我，所以我添加了一个变量来说明表单是否有错误，所以我添加了这个脚本：但它不起作用，你能帮我@Othman 吗？