解决在flask的wtform中设立hidden属性的组件无法取得值
解决在flask的wtform中设置hidden属性的组件无法取得值
有这样一个需求,用表单填写文件的大小,这个大小不仅有数字而且有单位,比如:12B/KB/MB。那么考虑设计前段页面展示一个填写数字的input,同时再来一个复选单位的框。
利用bootstrap的样式表单,代码如下:
<div class="input-group"> {{ form.size(class="form-control", placeholder="整数或小数") }} <div class="input-group-btn bs-dropdown-to-select-group"> <button type="button" class="btn btn-default dropdown-toggle as-is bs-dropdown-to-select" data-toggle="dropdown"> <span data-bind="bs-drp-sel-label">KB</span> {{ form.unit(value="KB", **{'data-bind':'bs-drp-sel-value'}) }} <span class="caret"/> </button> <ul class="dropdown-menu" role="menu" style=""> <li data-value="B"><a href="#">B</a></li> <li data-value="KB"><a href="#">KB</a></li> <li data-value="MB"><a href="#">MB</a></li> </ul> </div> </div>
需要使用js控制一下这个dropdown-menu的内容给到unit中:
$(document).ready(function(e){ $( document ).on( 'click', '.bs-dropdown-to-select-group .dropdown-menu li', function( event ) { var $target = $( event.currentTarget ); $target.closest('.bs-dropdown-to-select-group') .find('[data-bind="bs-drp-sel-value"]').val($target.attr('data-value')) .end() .children('.dropdown-toggle').dropdown('toggle'); $target.closest('.bs-dropdown-to-select-group') .find('[data-bind="bs-drp-sel-label"]').text($target.context.textContent); return false; }); });
同时需要在form.py文件中,添加这两个组件:
size = FloatField(u'大小', filters=[lambda x: x or None]) unit = HiddenField(u'单位', filters=[lambda x: x or None])
但是当我们运行的时候发现这个form.unit.data的内容取不到,是一个u'',空的字符串。
而把HiddenField换成StringField后就有值。在StringFiled中添加widget=HiddenInput()也不好使。
该怎么办呢?
搜遍了网络,有的说这是flask的一个bug,有的说和csrfform有关。但是用他们的思路,统统在我这里不好使。就在我快放弃的时候,突然想到:我为啥就一定要用hidden来隐藏一个组件呢?display:none行不行?
试了一下,竟然行。。。好吧,问题解决了。至于之前那个为什么我也没研究出来,谁了解可以给我留言。
解决后的代码如下(只罗列了一下和上面有差别的地方)
{{ form.unit(value="KB", style="display:none;",**{'data-bind':'bs-drp-sel-value'}) }}
size = FloatField(u'大小', filters=[lambda x: x or None]) unit = StringField(u'单位', filters=[lambda x: x or None])