Get data for div based on select value with ajax

I am currently stuck with getting data for a div on the same page based on the selected value from a dropdown.

I have a dropdown where the user can select a value. The dropdown takes the data from the CourseOverview-Model. Based on the selection, the div in the second part of the page should be filled in also with data from the CourseOverview-Model. In my code, the console.log shows the value I choose. But I am stuck with getting the connection to the whole data so that the second part of the page gets filled out. Any help is appreciated.

The goal is to create an individual scorecard with the prefilled table in the next step.

My html looks like this:

<!--Dropdown-->
<div class="container">
        <select id="choosecourse">
            <option value="">Select course</option>
            
        </select>
</div>

<!--Second part of the page which should be filled in based on the selection-->
<div class="container">
        <h5></h5>
</div>
<div class="container">
        <table class="table input-width">
            <tr>
                <td>Holes:</td>
                <td></td>
                <td>Par:</td>
                <td></td>
            </tr>
            <tr>
                <td>Your handicap:</td>
                <td></td>
                <td>Extra strokes:</td>
                <td><input type="number" min="0"></td>
            </tr>
    </table>
</div>

My javascript looks like this:

<script>
        $(document).ready(function() {
            $('#choosecourse').change(function(){
                var name = document.getElementById("choosecourse").value;
                console.log(name)
                });
            });
</script>

My views.py looks like this:

def add_score(request):
        courses = CourseOverview.objects.all()
        return render(request, "mrc/add_score.html", {
            "courses": courses
        })

And these are both necessary models from models.py:

class CourseOverview(models.Model):
    course_id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=64, unique=True)
    par = models.PositiveIntegerField()
    holes = models.PositiveIntegerField()


class Course(models.Model):
    course = models.ForeignKey("CourseOverview", on_delete=CASCADE, related_name="course")
    hole = models.PositiveIntegerField()
    holepar = models.PositiveIntegerField()
    holehcpi = models.PositiveIntegerField()

Many thanks in advance!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW