集合为 RadioButtons onclick答案

【问题标题】：Collection as RadioButtons onclick集合为 RadioButtons onclick
【发布时间】：2020-10-06 20:36:30
【问题描述】：

如何为以简单形式创建单选按钮的集合实现自动提交？

我有一个这样的输入行，我想在单击任何按钮时提交。

=f.input :langcode, as: :radio_buttons, :collection => ['de','en'].map{|l| [image_tag('flag_'+l+'.png'), l]}, label: false

我试图在最后添加一个 onclick 选项，但它似乎没有做任何事情。

感谢您的帮助。

【问题讨论】：

标签： ruby-on-rails radio-button simple-form

【解决方案1】：

只需编写一些真正的 javascript：

// put this in your asset pipeline or packs
document.addEventListener('change', (event) => {
  if (!event.target.matches(".submit-on-change")) return;
  event.target.form.submit();
});

<form>
  <div>
    <input type="radio" id="male" name="gender" value="male" class="magic-button">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female" class="magic-button">
    <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other" class="magic-button">
    <label for="other">Other</label>
   </div>
 </form>

这会创建一个简单的可重用行为，您可以通过添加 submit-on-click 类将其附加到任何元素。

您可以使用 SimpleForm 中的input_html 选项向输入添加一个类：

= f.input :langcode, as: :radio_buttons, 
                     collection: ['de','en'].map{|l| [image_tag('flag_'+l+'.png'), l]}, 
                     label: false, 
                     input_html: { class: 'submit-on-click' }

['de','en'].map{|l| [image_tag('flag_'+l+'.png'), l]} 虽然很臭 - 这应该从视图中提取出来并放入辅助方法或其他地方。

【讨论】：