英文:
$(this).val() returning empty on WTF with .on('input')
问题
我在Flask应用程序中有一个WTForm文本字段，其ID为start_date
<div class="col-2 col-2-xsmall" id="start_date">
{{ form.start_date(placeholder="Start Date") }}
</div>
我还有随后的jQuery代码，我正在尝试将其记录到控制台中。
var $start_date = $('#start_date');
$start_date.on('input', function(){
console.log($(this).val());
console.log("Hello");
});
最终目标是在字段中匹配正则表达式时更新DOM，但在开发过程中，当我记录$(this).val()时，控制台返回一个空字符串。额外的日志仅用于检查，当我在字段中按任意键时，它确实显示在控制台中。
这是当我输入数字1991时的控制台，我期望上面每个"Hello"之前的输出应该是字段中的值，而不是我收到的空字符串。
英文:
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.
答案1
得分: 2
我不确定是否理解正确，但首先，您为什么在类型为日期的输入字段上使用div？此外，您提到要获取输入字段的值，但却使用了文本方法，为什么？
您应该使用HTML input 标签代替div，如果只想使用日期类型，请添加type="date"，如下所示：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var start_date = document.getElementById('start_date');
start_date.addEventListener('input', function(event) {
console.log(event.target.value);
console.log("Hello");
});
<!-- language: lang-html -->
<input class="col-2 col-2-xsmall" id="start_date" value='{{ form.start_date(placeholder="Start Date") }}'>
<!-- end snippet -->
注意：我使用了纯JS，因为在代码片段中不识别jQuery，这样您可以执行它并查看是否符合您的要求。已将jQuery的注释代码提供。
英文:
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 :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
/*
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");
});
<!-- language: lang-html -->
<input class="col-2 col-2-xsmall" id="start_date" value='{{ form.start_date(placeholder="Start Date") }}'>
<!-- end snippet -->
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论