Python Forum

Full Version: Set form element from javascript
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi
I am struggling to use javascript to update an element on my form when an item is clicked on a select list
In the following code I can set the value of 'sd' with a set text, so I assume that the getAttribure call is failing but I cannot see why. Please take a look and see what I have done wrong.

Java Script
 function changeSizeInput() {
    var msg = document.getElementById('msgSelect');
      let sd = msg.options[msg.selectedIndex].getAttribute('startdate');
      document.getElementById("sd").value = sd; [color=#C0392B]I can set this value directly[/color]
  }
  changeSizeInput();
JSON
[
  {
    "txt": "message 1",
    "startdate": "a"
  },
  {
     "txt": "message 2",
    "startdate": "b"
  },
  {
    "txt": "message 3",
    "startdate": "c"
  }
]
Html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
    <script type="text/javascript" src="{{ url_for('static' , filename='js/LobbyTV.js') }}"></script>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <title></title>
</head>
<body>
  <form class="" action="/" method="post">
    <select onChange="changeSizeInput()" id="msgSelect" size="4">
    {% for msg in messages %}
      <option txt={{ msg['txt'] }}>{{ msg['txt'] }}</option>
    {% endfor %}
  </select>
    <input type="text" name="txt" id="msgTxt">
   <input type="text" name="startDate" id="sd">
    <input type="submit" value="Submit">
  </form>
<</body>
Python
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)
Does the JavaScript console in the browser give any errors?