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 >
        <select id="choosecourse">
            <option value="">Select course</option>
            {% for course in courses %} 
            <option>{{ course.name }}</option>
            {% endfor %}
        </select>
</div>

<!--Second part of the page which should be filled in based on the selection-->
<div >
        <h5>{{ id.name }}</h5>
</div>
<div >
        <table >
            <tr>
                <td>Holes:</td>
                <td>{{ id.holes }}</td>
                <td>Par:</td>
                <td>{{ id.par }}</td>
            </tr>
            <tr>
                <td>Your handicap:</td>
                <td>{{ user.handicap }}</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!

EDIT I tried for example the following:

<div >
        <select id="choosecourse">
            <option value="">Select course</option>
            {% for course in courses %} 
            <option>{{ course.name }}</option>
            {% endfor %}
        </select>
</div>

<!--Second part of the page which should be filled in based on the selection-->
<div >
        <h5 id="name"></h5>
</div>
<div >
        <table >
            <tr>
                <td>Holes:</td>
                <td id="holes"></td>
                <td>Par:</td>
                <td id="par"></td>
            </tr>
            <tr>
                <td>Your handicap:</td>
                <td>{{ user.handicap }}</td>
                <td>Extra strokes:</td>
                <td><input type="number" min="0"></td>
            </tr>
    </table>
</div>

Javascript

$(document).ready(function() {
            $('#choosecourse').change(function(){
                var name = document.getElementById("choosecourse").value;
                fetch("mrc/add_score.html", {
                    method: "PUT",
                headers:{
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest', 
                },
            })
            .then(response => {
                return response.json()
            })
            .then(data => {
                document.querySelector('#name').innerhtml = id.name
                document.querySelector('#holes').innerhtml = id.holes
                document.querySelector('#par').innerhtml = id.par
            })})})

And views.py:

def add_score(request):
    if request.method == "PUT":
        data = CourseOverview.objects.all()
        return JsonResponse(data)
    else:
        courses = CourseOverview.objects.all()
        return render(request, "mrc/add_score.html", {
            "courses": courses
        })

CodePudding user response：

I found another solution for my problem. As my page has already all information it needs, I added a for-loop for all divs containing the data I want and hide them.

In the next step I added some javascript to display the div that was chosen over the dropdown and hide the others.

Here is the corresponding code. Hope this helps someone with a similar problem.

HTML

<div >
        <select id="choosecourse">
            <option value="">Select course</option>
            {% for course in courses %} 
            <option>{{ course.name }}</option>
            {% endfor %}
        </select>
</div>

<!--Second part of the page which should be filled in based on the selection-->
<div >
        <h5 id="name"></h5>
</div>
<div >
        {% for course in courses %}
        <div style="display: none;"  data-name="{{ course.name }}">
            <div><h5 id=>{{ course.name }}</h5></div>
            <div><table >
                <tr>
                    <td>Holes:</td><td>{{ course.holes }}</td>
                    <td>Par:</td><td>{{ course.par }}</td>
                </tr>
                <tr>
                    <td>Your handicap:</td><td>{{ user.handicap }}</td>
                    <td>Extra strokes:</td><td><input type="number" min="0"></td>
                </tr>
            </table></div>
        </div>
        {% endfor %}
</div>

My javascript looks like this:

$(document).ready(function() {
            $('#choosecourse').change(function(){
                let name = document.getElementById("choosecourse").value;
                console.log(name);
                $(".hidethem").hide();
                document.querySelector("[data-name="   CSS.escape(name)   "]").style.display = 'block';
                });
            });

Nevertheless thanks for the chance to discuss problems here!