javascript - 使用 Django 按钮来选择项目

Question

我有 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:')

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

仅其中一个按钮的 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 %}

Answer 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 标记中。千万不要这样做!人们可以改变这些值(value)观......给客户尽可能少的东西。因此，您需要一个模型来存储您的价格等。

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