解决在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])