在按钮上单击将数据从模型添加到新表单

Question

我是 stackoverflow 和 django 的新手，如果描述性不够，我很抱歉。

models.py 文件

from django.db import models

# Create your models here.
SPORTS_CHOICES = (
    ('nfl', 'NFL'),
    ('nba', 'NBA'),
    ('mlb', 'MLB'),
)

class Event(models.Model):
    sports = models.CharField(max_length=3, choices=SPORTS_CHOICES, default='nfl')
    event_name = models.CharField(max_length=100, default='')
    home_team = models.CharField(max_length=100)
    away_team = models.CharField(max_length=100)
    home_team_moneyline_odds = models.DecimalField(max_digits=3,decimal_places=2)
    away_team_moneyline_odds = models.DecimalField(max_digits=3, decimal_places=2)
    home_team_spread = models.CharField(max_length=100)
    home_team_spread_odds = models.DecimalField(max_digits=3, decimal_places=2)
    away_team_spread = models.CharField(max_length=100)
    away_team_spread_odds = models.DecimalField(max_digits=3, decimal_places=2)
    total_points_over = models.CharField(max_length=100)
    total_points_over_odds = models.DecimalField(max_digits=3, decimal_places=2)
    total_points_under = models.CharField(max_length=100)
    total_points_under_odds = models.DecimalField(max_digits=3, decimal_places=2)

    def __str__(self):
        return format(self.event_name)

views.py

from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from .models import Event

# Create your views here.
@login_required
def sports(request):
    context = {
        'events': Event.objects.all()
    }
    return render(request, 'sports/sports.html', context)

sports.html

{% extends "blog/base.html" %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
             {% for event in events %}
                <table class="table table-light table-sm table-hover">
                    <tr class="thead-dark">
                        <th style="width: 31%">Teams</th>
                        <th style="width: 23%">Spread</th>
                        <th style="width: 23%">Win</th>
                        <th style="width: 23%">Total</th>
                    </tr>
                    <tr>
                        <th class="table-bordered">{{ event.home_team }}</th>
                        <td class="table-bordered"><button class="removebuttonstyling">{{ event.home_team_spread }} ({{ event.home_team_spread_odds }})</button></td>
                        <td class="table-bordered"><button class="removebuttonstyling">{{ event.home_team_moneyline_odds }}</button></td>
                        <td class="table-bordered"><button class="removebuttonstyling"> O {{ event.total_points_over }} ({{ event.total_points_over_odds }})</button></td>
                    </tr>
                     <tr>
                         <th class="table-bordered">{{ event.away_team }}</th>
                         <td class="table-bordered"><button class="removebuttonstyling">{{ event.away_team_spread }} ({{ event.away_team_spread_odds }})</button></td>
                         <td class="table-bordered"><button class="removebuttonstyling">{{ event.away_team_moneyline_odds }}</button></td>
                         <td class="table-bordered"><button class="removebuttonstyling"> U {{ event.total_points_under }} ({{ event.total_points_under_odds }})</button></td>
                    </tr>
                </table>
                {%  endfor %}
            </div>
            <div class="col-sm-4 betslip">
                <form>
                    <div class="form-group">
                        <h3>Bet Slip</h3>
                        <input class="buttonbottom" type="submit" value="Confirm Bet">
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock content %}

Image of my website

基本上，我想点击表格中的 6 个选项（获胜、点差、总数）之一，然后在表格右侧的投注单中显示选择，以便用户可以对所选投注进行投注。这可能是一个太模糊的问题，但如果有人能指出我正确的方向，我将不胜感激。

Answer 1

目前表格中的按钮什么都不做。 如果您想立即在投注单部分显示内容，而无需重新加载页面，您可以使用 jQuery。这里没有 django。

在投注单部分添加块以显示内容：

<div class="form-group">
  <h3>Bet Slip</h3>
  <div class="chosenEvents"></div>
  <input class="buttonbottom" type="submit" value="Confirm Bet">
</div>

然后添加一些点击事件处理：

$(".removebuttonstyling").click(function() {
  $(".chosenEvents").append($(this).text()); // Show content of chosen event
});

上面不是$(this).text()，你可以传递任何你想要的东西来显示值。但是，如果您想进一步提交表格。您需要有一个表单字段，而不是 .chosenEvents 块。像这样：

<form name="myform" method="POST" action="view_url">
  <div class="form-group">
    <h3>Bet Slip</h3>
    <input type="number" class="chosenEventFieldValue">
    <input class="buttonbottom" type="submit" value="Confirm Bet">
  </div>
</form>

还有：

$(".removebuttonstyling").click(function() {
      $(".chosenEventFieldValue").val($(this).text()); // Use content of chosen event as form field value
    });

一定要在你的页面上加载一个 jQuery 静态文件。