Select Soccer Team and Output Soccer Team's Lo

Question

I am creating a form, where someone chooses a team and then the team's location should be outputted in a div.

Here is what I have so far. How do I get the location from the correct team - the one that is chosen by the user?

<select id="chooseTeam" name="chooseTeam" data-placeholder="Select Team">
    <option></option>
    {% for team in teams %}
        <option>{{team.name}}</option>
    {% endfor %}
</select>

<div>{{team.location}}</div>

class Team(db.Model):
    __tablename__ = 'Team'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String())
    location = db.Column(db.String())

Answer 1

Basically, you have to write a JavaScript function that checks whether a specific team has been selected by the user. If one has been selected, you make an AJAX request to the server including the chosen value of {{team.name}}. On the server, write a function in which you check which Team instance in your database has that selected name. As soon as you have found it, you can query the location of that particular team and return it as an HTTP response in XML or JSON format. In the success handler of your $.ajax() function, you can retrieve the location and add it to your DIV using jQuery selectors.