我的页面上有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>
答案 0 :(得分:0)
根据我的理解,您希望动态地将食物添加到您的表单对话中。这将要求您使用javascript将膳食添加到您的页面,以便用户可以选择膳食。一旦用户选择了早餐,午餐或晚餐,您将需要拨打Ajax电话,以便在所选菜单下选择餐点。在这种情况下,菜单指的是早餐菜单,午餐菜单或晚餐菜单。