收集为单选按钮 onclick

Collection as 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 class.

附加到任何元素

您可以使用 SimpleForm 中的 input_html 选项将 class 添加到输入中:

= 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]} 虽然很臭 - 这应该从视图中提取出来并放入辅助方法或其他地方。