作为RadioButtons onclick收集

问题描述

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

我有这样的输入行，单击任何按钮时都希望提交。

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

我试图在最后添加一个onclick选项，但似乎没有任何作用。

感谢您的帮助。

解决方法

只需编写一些真正的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',l]}有点臭-应该将其从视图中提取出来，并放入辅助方法或其他地方。