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
Html
css
Json
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
{ % 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 % } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.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 ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[ { "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" } ] |