通过模态表单提交传递变量(Django)

时间:2012-12-08 23:07:46

标签: html django twitter-bootstrap

我的页面上有3个选项:早餐,午餐和晚餐。当您将鼠标悬停在它们上方时,会有一个请求按钮来选择一顿饭。这提供了一种模式形式,让人们可以选择不同的膳食形式。

我想在膳食类型中添加另外一餐。我可以找到膳食类型的唯一方法是,如果我以某种方式将此信息传递给1)模态对话框和2)那里的提交按钮。

我该怎么做这两件事?

相关守则:

模板

        <div class="row-fluid">
            <div class="span12 hero-unit">
                <div class="row-fluid">
                       <h3> What Type of Meal Is It- Breakfast Lunch or Dinner? </h3>
                    </p>
                    <br>
                </div>
                <div class="row-fluid align-center">
                    <div class="span4">
                        <div>
                            <div class="library-image-parent">
                                <img src="{{ STATIC_URL }}images/breakfast.png"
                                width="200" height="160" alt="1" />
                                <div class="options">
                                    <ul class="unstyled" style="font-size:16px;">
                                 <div class="span11" style="text-align:center;">
                                        <a href="#myModal" role="button" class="btn btn-success" data-toggle="modal">Request A Meal</a>
                                                                        </div>
                            </div>
                        </div>
</div>

                    </div>

提出膳食申请的模式表格

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Select Your Meal to Make a Request</h3>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" method="POST" action="" class="uniForm">
    <fieldset class="inlineLabels">
        {% csrf_token %}
        <h6> Meal </h6>
        <br>
        {{ formtoaddrequest.meal }}
        <br>
                    <div class="form_block" style="float:right;">
                        <input class="btn btn-primary" type="submit" value="{% trans 'Add Request' %}">
                    </div>
    </fieldset>
</form>
</div>
</div>

1 个答案:

答案 0 :(得分:0)

根据我的理解,您希望动态地将食物添加到您的表单对话中。这将要求您使用javascript将膳食添加到您的页面,以便用户可以选择膳食。一旦用户选择了早餐,午餐或晚餐,您将需要拨打Ajax电话,以便在所选菜单下选择餐点。在这种情况下,菜单指的是早餐菜单,午餐菜单或晚餐菜单。