How to pass a javascript variable to WTForm? Python/Flask

Question

I am creating a data entry/timing web app using Python and Flask. When the user goes to the log page, they enter in the "session ID" for their task, and the time of form submission and user ID are automatically input to the database as well.

Now I am trying to use Javascript to record when the page is loaded for a task so I have a start time and an end time. I first attempted to POST the javascript variable via AJAX to the back end, but I couldn't seem to get it to work. Now I am trying to have the javascript variable be sent alongside the session ID as part of a "HiddenField". I am not yet at the point of configuring the page load time script, I am just trying to get the Javascript to talk to WTForms to talk to my database commit. Here is my code currently:

views.py

@app.route('/logpage', methods=['GET', 'POST'])
@login_required
def logpage():
    form = LogForm()

    if form.validate_on_submit():
        timer = request.get_data("timer")
        entry = LogData(sessionid=form.sessionid.data, user_id=current_user.get_id(), starttime=form.testvar.data, endtime=datetime.utcnow())
        db.session.add(entry)
        db.session.commit()

        return redirect(url_for('home'))

    return render_template('logpage.html', form=form)

models.py

class LogForm(FlaskForm):
    sessionid = StringField('sessionid', validators=[InputRequired(), Length(min=16, max=16)])
    testvar = HiddenField('testvar')

logpage.html

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Active Log Page{% endblock %}
{% block head %}
    <!-- Custom styles for this template -->
    <link href="static/css/starter-template.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
    <script src="static/js/timer.js?version=25"></script>
{% endblock %}

{% block body %}

    <div class="container">

    <div class="form-group">
    <form class="form-logpage", method="POST" action="/logpage", id="jsinput">
      {{ form.hidden_tag() }}
      {{ wtf.form_field(form.sessionid) }}
      <div id="jsinput">
      {{ wtf.form_field(form.testvar) }}
      </div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Finish Job</button>
</form>
  </div>
</div>
{% endblock %}

timer.js

var myData = "dataVariable";
document.getElementById("jsinput").value = "myData";

As you can see, I tried to use document.getElementById to put the variable in logpage.html, but when I hit submit, the starttime field is empty. I've looked around the documentation for a way to put a variable in the WTForm, but I can't find anything relevant.

Before, during some other issues it's showed as null and /x and ''b but I've done a good bit of tinkering since then and the database entry is just ''.

If there is a more elegant way to record page load datetime and record simultaneously to the database with the rest of the data, I would love to hear suggestions. Previous SO post here: Python/Flask: How to tell how long a user spends on a page? (Data entry/time log app)

Answer 1

Here's the solution I came up with for this problem:

1. Add a hidden field to the form with an id.
2. Grab the ID in your script and assign a value to it.

In your form.py:

from flask_wtf import FlaskForm
from wtforms import SubmitField
from wtforms import HiddenField

class MyForm(FlaskForm):
    
    my_data = HiddenField(
        'my_data',
        render_kw={'id':'my_data'}
    )
    
    save = SubmitField(
        'Save',
        render_kw={'id':'save'}
    )

create and pass your form in your view and then render the save and my_data fields in your html template using {{ form.save }} and {{ form.my_data }}

Add the following to your javascript:

var saveButton = document.getElementById('save');

saveButton.addEventListener('click', function() {
    document.getElementById('my_data').value = 'MY DATA IS HERE!!';
});

you can now access your data in your python view using:

from flask import request

...some code...

request.form['my_data']

It's a late answer, but hopefully useful to someone out there...