Rails 5 ajax 表单：单击 Ajax 中的 2 个单选按钮之一提交表单

Question

Note: Similar questions exist but none of them resemble my case

I am making a small Ajax form in my rails views with yes or no radio buttons, I made this form with remote: true and it acts correctly as Ajax if I use a separate submit button (no page reload happens & form is passed to controller)

If I use Jquery to make the radio buttons themselves submit the form, then it submits but not in Ajax (but with a page reload)

So how to fix this to:

Submit form on clicking one of the 2 radio buttons in Ajax?

The two things I tried:

1) Make two different submit buttons & try to adjust the form value in the submit btn itself, if I make them as submit buttons, Ajax works well but the form doesn't get my required value

    <div class="radio-button-btn-wrapper mr-2">
      <%= f.submit t('yes'), recommended: true,  class: "radio-button-btn-label-white background-green"  %>
    </div>
    <div class="radio-button-btn-wrapper mr-2">
      <%= f.submit t('no'), recommended: false, class: "radio-button-btn-label-white background-red" %>
    </div>

2) Adjust the radio buttons to submit the form in Ajax manner (tried this but it didn't work)

  <%= simple_form_for [...model names], remote: true do |f| %>
  <div class="flex">

    <div class="radio-button-btn-wrapper mr-2">
      <%= label :recommended, t('yes'), class: "radio-button-btn-label white" %>
      <%= f.radio_button :recommended, true, onclick: "$(this).closest('form').submit();", class: "radio-button-btn background-green" %>
    </div>
    <div class="radio-button-btn-wrapper">
      <%= label :recommended, t('no'), class: "radio-button-btn-label white" %>
      <%= f.radio_button :recommended, false, onclick: "$.ajax((this).closest('form').submit());", class: "radio-button-btn background-red" %>
    </div>
  </div>

Answer 1

What worked for me was adding a 'normal' submit button and set it to display none. Then add an eventListener that listen to a click on the radio button and if that happens, let it click on the hidden submit button.

  <%= simple_form_for [...model names], remote: true do |f| %>
  <div class="flex">

    <div class="radio-button-btn-wrapper mr-2">
      <%= label :recommended, t('yes'), class: "radio-button-btn-label white" %>
      <%= f.radio_button :recommended, true, class: "radio-button-btn background-green" %>
    </div>
    <div class="radio-button-btn-wrapper">
      <%= label :recommended, t('no'), class: "radio-button-btn-label white" %>
      <%= f.radio_button :recommended, false, class: "radio-button-btn background-red" %>
    </div>
    <%= f.submit '', class: 'd-none', id: 'submitMyForm' %>
  </div>

document.addEventListener('click', function(event){
  if(event.target.classList.contains('radio-button-btn'){
    document.querySelector('#submitMyForm').click();
  }
});

Answer 2

Please look into the code below and try to adapt it for your case. This is working code I have tested in my Rails app.

The basic idea is instead of trying to make the radio buttons as submit buttons I employed the approach of a hidden form and then bind click events on radio buttons. In the button click handler I set the selected radio button's value as a hidden field value in hidden form and submit the hidden form. It gets submitted as an AJAX request and on controller-end handle the JS response.

Hope this helps.

routes.rb

  root "welcome#index"

  post "welcome_submit_form" => "welcome#submit_form", as: :welcome_submit_form

app/controllers/welcome_controller.rb

  class WelcomeController < ApplicationController

    def index

    end

    def submit_form
      @received_radio_value = params[:selected_radio_value]

      render file: "welcome/submit_form_response.js.haml"
    end
  end

app/views/welcome/index.html.haml

  .my-container<
    %div(style='display: none;')
      = form_tag(welcome_submit_form_path, class: 'my-hidden-form', remote: true) do |f|
        = hidden_field_tag "selected_radio_value", nil

    = radio_button_tag 'favorite_color', 'red', false, class: 'my-radio-btn'
    Red
    = radio_button_tag 'favorite_color', 'blue', false, class: 'my-radio-btn'
    Blue

  .my-selected-radio-value(style='display: none')

app/views/welcome/submit_form_response.html.haml

  %h2= "My Radio Value: #{@received_radio_value}"

app/views/welcome/submit_form_response.js.haml

  - response_markup = escape_javascript(render( partial: "welcome/submit_form_response.html.haml" ))

  :plain

    var responseMarkup = "#{response_markup}";

    var responseContainer = $('.my-selected-radio-value');

    responseContainer.html(responseMarkup);
    responseContainer.show();

app/assets/javascripts/welcome.js

(function ($) {

  bindClickEventOnMyRadioBtn = function() {
    $('.my-container .my-radio-btn').off('click').on('click', function(event) {
      var selectedRadioVal = $(this).val();

      var myHiddenForm = $('.my-container .my-hidden-form');
      var radioValueField = myHiddenForm.find('input[name=selected_radio_value]');
      radioValueField.val(selectedRadioVal);

      myHiddenForm.submit();
    })
  }

}) (jQuery);

var ready;

ready = function() {
  bindClickEventOnMyRadioBtn();
};

$(document).ready(ready);

Answer 3

After extensive searching for why this happens & how to fix it in the easiest way, I found this issue in Rails 5.2 & thanks to this solution from Padi we should use this code to make it work as expected:

// Get hold of the form object
form = document.querySelector('form');
// Use the Rails fire helper 
Rails.fire(form, 'submit');