Collection as RadioButtons onclick

Question

How do I implement an autosubmit for a collection that creates radiobuttons in simpleform?

I have an input line like this that I would want to submit when any button is clicked.

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

I have tried to add an onclick option at the end, but it does not seem to do anything.

Thanks for your help.

Answer 1

Just write some real javascript instead:

// 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>

This creates a simple resusable behavior that you can attach to any element by adding the submit-on-click class.

You can add a class to the inputs by using the input_html option in SimpleForm:

= 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]} is pretty smelly though - this should be extracted out of the view and into a helper method or somewhere else.