Flask and select element

[GrahamL]

Hi
I have a web page with a select element and several text elements
The select is populated by passing data in the render_template
The aim is to populate the text elements with the data associated when the user selects an item in the list

What would be the best way to implement this?

Platform is Windows
Thanks

Python code

from flask import (Flask, render_template, request, redirect, url_for, render_template)
from model import data
app = Flask(__name__)


@app.route("/", methods=["GET", "POST"])
def home():
    if request.method == "POST":
        return redirect(url_for('ticker_tape_1'))
    else:
        return render_template("home.html")

@app.route("/ticker_Tape_1", methods=["GET", "POST"])
def ticker_tape_1():
    if request.method == "POST":
        return redirect(url_for('ticker_tape_1'))
    else:
        return render_template("ticker_tape_1.html", messages=data)

Html

{% extends 'base.html' %}
{% block content %}
<h1>Ticker Tape 1</h1>

<form class="aa" method="POST" action="{{ url_for('ticker_tape_1') }}">
    <div class="row">
    <div class="column">
        <fieldset>
            <label for="message">Message</label>
            <input type="text" name="msg" id="message"><br><br>
            <label for="startdate">Start Date</label>
            <input type="date" id="startdate"><br><br>
            <label for="starttime">Start Time</label>
            <input type="time" id="starttime"><br><br>
            <label for="duration">Duration</label>
            <input type="time" id="duration">
        </fieldset>
    </div>
    <div class="column">
        <div class="noscroll">
            <select class="message_selector" name="message" id="txt" multiple="multiple" size="5">
                {% for message in messages %}
                <option value="{{message.txt}}">{{message.txt}}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    </div>
</form>
{% endblock %}

css

.column {
  float: left;
  width: 25%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.noscroll {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: solid gray 1px;
}

.noscroll select {
  padding: 10px;
  margin: -5px -20px -5px -5px;
}

Json

[
  {
    "id": "1",
    "txt": "message 1",
    "start_date": "01/04/2020",
    "start_time": "16:20",
    "duration" : "1"
  },
    {
    "id": "1",
    "txt": "message 2",
    "start_date": "01/04/2020",
    "start_time": "16:20",
    "duration" : "1"
  }
]

[Larz60+]

Please elaborate.
Which platform are you using?
Code would be most helpful.

[ndc85430]

Please do elaborate, yes. With the minimal details you've provided though, it sounds like this is something to be done client-side (e.g. in JavaScript).

[GrahamL]

Please elaborate.
Which platform are you using?
Code would be most helpful.

Updated with code

[ndc85430]

Then yeah, write code on the client side to populate the fields. That does mean JavaScript to respond to the events that occur when you select items (or something that gets transpiled to JavaScript of course).

[GrahamL]

Then yeah, write code on the client side to populate the fields. That does mean JavaScript to respond to the events that occur when you select items (or something that gets transpiled to JavaScript of course).

Ok thanks
Im new to all this stuff - can you point me at some examples on how this works
thanks

[Anarab]

You would need a drop-down on select JavaScript library, there is plenty of them just google it

this stack overflow answer might be helpful.