用Django按钮来选择项目

时间:2017-09-26 15:59:42

标签: javascript jquery html django button

我有6个按钮,可以选择买东西。您无法进行多项选择,只能选择一项,然后自动选择该项目并重新路由到结帐部分。我的问题是,使用Django,我如何将这些按钮的值(即价格,信用等)嵌入到每个按钮中,以便它们用于结账时使用的按钮。我最初的方法是我在Django.admin中动态创建项目,而不是让你单独选择一个项目的页面,而不是一个复选框,从我通过模型(bono)在管理员中创建的任何项目中选择我创造了。但是,我需要将项目硬编码到单个按钮中,而不是依赖于Django.admin和服务器。

我附上了一个示例html和图片显示按钮,并会根据要求添加任何其他项目。我根本不知道应该包括哪些项目: 编辑: 我目前正在使用链接标记重新路由到不同的页面,但不会向模型发布任何内容。 包的模型如下:

class CreditPackage(models.Model):
    name = models.CharField(max_length = 400, null=True, blank = True, verbose_name = 'Credit Package Name')
    description = models.TextField(max_length = 10000, null=True, blank = True, verbose_name = 'Description')
    price = models.IntegerField(null=True, blank = True, verbose_name = 'Price')
    nr_credits = models.IntegerField(null=True, blank = True, verbose_name = 'Number of Credits:')
    on_sale = models.BooleanField(null=False, blank = False, verbose_name = 'On Sale:')

点击后,我需要制作圈子,将相关信息传递给该模型并重新路由到结帐。

enter image description here 其中一个按钮的html:

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint">
              <a href="{% url 'student-packages' %}">
              <div class="circle" style="background: #0045ab" ><span style="font-weight:bold; font-size:60px;"  >3</span><br> Credits</div>
                <div id="price">25€</div>
                <div id="savings">
                  {% trans 'You save' %} <span style="font-weight:bold">5€</span><br><br>
                    {% blocktrans %} Ideal if you want to<br>
                  try out Milingual {% endblocktrans %}</br>.
                </div></a>
            </div>

页面的完整html:

{% load static %}
{% load staticfiles %}
{% load i18n %}

{% block bonos %}
<div class="container" >
 <div id='titleb' class="container">
  <h2 style= "color:black; align=center">MILINGUAL BONO</h2>
 </div>
 <div id='titleb' class="container">
  <h1 style= "color:black; align=center">MILINGUAL BONO</h1>
 </div>

 <div>
 <p>{% trans 'The Milingual Bono offers you more classes for much lesser. It saves you the hasslse of pasying each time you book a class, at the same time offering you the flexibilty of attending any Milingual class or event, anytime you want. Pick the 3 class bono if you would like to give it a try firt or book the <b>season bono</b> for unlimited access for 3 months.' %}
 </p>
 </div>
    <div>
      <div class="row">
        <!-- New set of columns, centered -->
        <div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal">
              <a href="{% url 'student-packages' %}">
              <div class="circle" style="background: #0045ab" ><span style="font-weight:bold; font-size:60px;"  >3</span><br> Credits</div>
                <div id="price">25€</div>
                <div id="savings">
                  {% trans 'You save' %} <span style="font-weight:bold">5€</span><br><br>
                    {% blocktrans %} Ideal if you want to<br>
                  try out Milingual {% endblocktrans %}</br>.
                </div></a>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-target="#login-modal">
                <div class="circle" style="background: #58aeb4" ><span style="font-weight:bold; font-size:60px;">6</span><br> Credits</div>
                <div id="price">39€</div>
                <div id="savings">
                  {% trans 'You save' %} <span style="font-weight:bold">21€</span><br><br>
                    {% blocktrans %} Ideal if you want to<br>
                  try Milingual or have attended <br>
                  a couple of classes. {% endblocktrans %}
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal">
                <div class="circle"   style="background: #e8bf16"><span style="font-weight:bold; font-size:60px;">8</span><br> Credits
                </div>
                <div class="ribbon-wrapper-blue">
                  <div class="ribbon-blue">{% trans 'Most Popular' %}
                  </div>
                </div>
                <div id="price">50€</div>
                <div id="savings">
                  {% trans 'You save' %} <span style="font-weight:bold">30€</span><br><br>
                    {% blocktrans %} Ideal if you want to practice <br>
                  twice a week for a month {% endblocktrans %}
                </div>
            </div>
        </div>
    </div>

  </div>
  <span><br></span>
<div>
    <div>
      <div class="row">
        <!-- New set of columns, centered -->
        <div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal" >
              <div class="circle"  style="background: #a7a5a7"><span style="font-weight:bold; font-size:60px;">10</span><br>Credits
              </div>
                <div id="price">64€</div>
                <div id="savings">
                  {% trans 'You save' %} <span style="font-weight:bold">36€</span><br><br>
                    {% blocktrans %} Ideal if you want to make<br>
                  Milingual part of your routine {% endblocktrans %}
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal">
                <div class="circle"  style="background: #c6595b"><span style="font-weight:bold; font-size:60px;">12</span><br> Credits</div>
                <div id="price">79€</div>
                <div id="savings">
                  {% trans 'You save' %} <span style="font-weight:bold">41€</span><br><br>
                    {% blocktrans %} Ideal for multiple classes per<br>
                  week. {% endblocktrans %}
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal">
                <div class="circle2"   style="background: #b18358"><span style="font-weight:bold; font-size:50px;">SEASON</div>
                <div id="price">89€</div>
                <div id="savings">
                  {% trans 'You save' %} <span style="font-weight:bold">200€*</span><br><br>
                    {% blocktrans %} Get unlimited accee to <br>
                  classes as well as paid events<br>
                  for no extra cost. {% endblocktrans %}
                </div>
            </div>
        </div>
    </div>
   </div>
  </div>

  </div>
</div>
</div>
{% endblock bonos %}

1 个答案:

答案 0 :(得分:1)

创建一个模型(在我的示例中为DataStorageModel),它存储数据库中的所有信息并通过某个名称字段引用它。

将此名称添加到带有名称标签的提交按钮,例如:

<input id="create" type="submit" name="create" value="Create"/>

然后在views.py中检查request.POST中的名称:

if request.POST.get('create'):
    obj = DataStorageModel.objects.get(name='create')
    ...

更新:

我刚看到您打算将价格存储在html标记内。永远都不要!人们可以改变这些价值......尽可能少地给客户。因此,您需要一个模型来存储您的价格等。

DataStorageModel(model.Model):
    price = models.DecimalField(max_digits=8, decimal_places=2)
    credits = models.PositiveIntegerField()
    name = models.CharField()