On button click add data from model to a new form

Question

I'm new to stackoverflow and django so sorry if this isn't descriptive enough.

models.py file

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

Basically I want to click on one of the 6 options (win, spread, total) in the table and then display the selection in the betslip to the right of the table so that a user can bet on the selected bet. This may be too vague of a problem but if someone could just point me in the right direction I would greatly appreciate it.

Answer 1

Currently buttons in your table do nothing. If you want to show content in the Bet Slip section right away, without reloading the page you can use jQuery for this. There is no django here.

Add a block in Bet Slip section to display content:

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

Then add some click event handling:

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

Above instead of $(this).text() you can pass anything you want in order to display the value. But if further you want to submit a form. Instead of .chosenEvents block you need to have a form field. Like this:

<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>

And:

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

Be sure to have a jQuery static files to be load on your page.