Question

我尝试将单选按钮和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.text_field :system, class:"input-small"

当我提交时，没有任何反应，因为即使检查了收音机，我也会在参数中给出空白值（我认为它会考虑文本字段）。

我试着给text_field另一个名字，并在更新后替换了控制器中的：system值，但它看起来像一个肮脏的方式......

你有什么更干净的想法吗？

Answer 1

在这里，您不能将radio_button和text_field直接混合在同一个字段中。我认为您可以定义一个额外的radio_button字段，该字段将被隐藏，当用户进入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中输入值时，它会将隐藏的radio_button的值设置为text_field_value。

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

上面的代码只是为了说明如何处理问题，并且不会像它一样工作.. :)）

Answer 2

感谢Sandip的帮助，我设法解决了我的问题！

以下是观点：

= f.radio_button :system, "bacteria"
Bacteria
= f.radio_button :system, "mammalian"
Mammalian
= f.radio_button :system, "yeast"
Yeast
= f.radio_button :system, "insect"
Insect
%br/
= f.radio_button :system, nil, id: 'other_system_radio', 
                checked: radio_checked?('system', f.object.system) 
Other:
%input.input-small#other_system_text{ value: text_input?('system', f.object.system) }

我使用辅助函数来管理编辑表单（如果值与给定值不同，请填写文本字段）：

def radio_checked?(type,val)
  case type
    when 'system'
      ['bacteria', 'mammalian', 'yeast', 'insect'].include?(val) ? '' : 'checked'               
    end
  end

def text_input?(type,val)
  case type
    when 'system'
      ['bacteria', 'mammalian', 'yeast', 'insect'].include?(val) ? '' : val
  end       
end

当用户关注文本字段时，还有一些Javascript来选择“其他”单选按钮：

@handle_other_field = ->
  $('#other_system_text').focus( -> $('#other_system_radio').attr('checked','checked'))
  $('#other_system_text').keyup( -> $('#other_system_radio').val($(this).val()))

混合单选按钮和text_field

2 个答案: