$(this).val() returning empty on WTF with .on('input')

Question

I have a WTForm text field in a flask application with the id start_date

<div class="col-2 col-2-xsmall" id="start_date">
    {{ form.start_date(placeholder="Start Date") }}
</div>

I also have subsequent jQuery that I'm trying to log into the console.

var $start_date = $('#start_date')
    $start_date.on('input', function(){
        console.log($(this).text());
        console.log("Hello")

The end goal is to update the DOM when a regular expression is matched in the field, but during development, when I log $(this).val(), I'm getting back an empty string in the console. The additional log is just to sanity check, which does show up in the console when I press any key in the field.

nilread.wkx http://localhost:5000/query.html?query_id=1
main.js:217 
main.js:218 Hello

main.js:217 
main.js:218 Hello

main.js:217 
main.js:218 Hello

main.js:217 
main.js:218 Hello

This is the console when I type the number 1991, where I would expect the output above each Hello to be the value that is in the field instead of the empty string I'm getting.

Answer 1

I am not sure to have well understood, but first, why are you using a div for an input of type date ? Also, you have talked about getting value of the input, but you use text method : why ?

Instead of a div, you should use HTML input (add type="date" if you want only to have date type) tag like this :

/*
var $start_date = $('#start_date');
$start_date.on('input', function(event) {
    console.log(event.val());
    console.log("Hello");
});
*/

var start_date = document.getElementById('start_date');
start_date.addEventListener('input', function(event) {
    console.log(event.target.value);
    console.log("Hello");
});

<input class="col-2 col-2-xsmall" id="start_date" value='{{ form.start_date(placeholder="Start Date") }}'>

Note : I have used Vanilla JS because JQuery is not recognized in the snippet, so that you can execute it and see if it is what you want. The commented JQuery code should work.