混合单选按钮和text_field [英] Mixing radio buttons and text_field

问题描述

我正在尝试将单选按钮和text_field组合为一个值:

I'm trying to combine radio buttons and text_field for a single value :

= f.radio_button :system, "bacteria"
Bacteria
= f.radio_button :system, "mammalian"
Mammalian
= f.radio_button :system, "yeast"
Yeast
= f.radio_button :system, "insect"
Insect
= f.radio_button :system, "other"
Other:
= f.text_field :system, class:"input-small"

当我提交时，什么都没有发生，因为即使检查了单选(我认为它考虑的是文本字段)，参数中也给出了空白值.

When I submit, nothing happens because a blank value is given in params even if a radio is checked (I think it considers the text field).

我试图给text_field赋予另一个名称，并在更新后替换了控制器中的:system值，但这看起来像是一种肮脏的方式...

I tried to give another name to the text_field, and replaced the :system value in the controller after updating, but it looks like a dirty way...

您有更清洁的想法吗?

推荐答案

在这里，您不能直接将同一字段的radio_button和text_field混合在一起. 我认为您可以定义一个额外的单选按钮字段，该字段将被隐藏，并且当用户输入text_field时其值将被更新.

Here you can not directly mix radio_button and text_field together for the same field. I think you can define one extra radio_button field that will be hidden and whose value will get updated when user enters into text_field.

= f.radio_button :system, "bacteria"
Bacteria
= f.radio_button :system, "mammalian"
Mammalian
= f.radio_button :system, "yeast"
Yeast
= f.radio_button :system, "insect"
Insect
= f.radio_button :system, "other"
Other:
= f.radio_button :system, nil, :id => :hidden_radio, :style => "display:none"
= f.text_field :free_system_input, class:"input-small", :id => :free_system_input

在上面，您将在text_field上编写onchange事件，每当在text_field中输入值时，它将会将隐藏的单选按钮的值设置为text_field_value.

In above you will be writing onchange event on text_field and whenever value gets entered inside text_field it will set hidden radio_button's value to the text_field_value.

:javascript
 $("free_system_input").keyup(function(){
   $("hidden_radio").val($(this).val())
 })

以上代码仅是为了说明如何处理问题，而不能按原样..:)

Above code is just to give idea how to deal with issue and will not work just as it is .. :)

这篇关于混合单选按钮和text_field的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！