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

注: 存在类似的问题，但没有一个与我的情况类似

我在rails视图中使用yes或no单选按钮制作一个小Ajax表单，我使用

remote:true

制作了这个表单，如果我使用单独的submit按钮，它将正确地充当Ajax（无需重新加载页面&表单被传递给控制器）

如果我使用Jquery让单选按钮自己提交表单，那么它会提交表单，但不会在Ajax中提交表单（但会重新加载页面）

那么，如何解决这一问题：

单击Ajax中的两个单选按钮之一提交表单？

我试过两件事：

1） 制作两个不同的提交按钮&尝试在提交btn本身中调整表单值，如果我将它们制作为提交按钮，Ajax工作得很好，但是表单没有得到我所需的值

    <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） 调整单选按钮以Ajax方式提交表单（尝试了此操作，但无效）

---

对我有效的方法是添加一个“正常”提交按钮，并将其设置为“无显示”。然后添加一个eventListener来监听单选按钮上的单击，如果发生这种情况，让它单击隐藏的提交按钮

document.addEventListener（'click'，函数（事件）{
if（event.target.classList.contains（'radio-button-btn'））{
document.querySelector（“#submitMyForm”）。单击（）；
}
});

请查看下面的代码，并尝试根据您的情况进行调整。这是我在Rails应用程序中测试的工作代码

基本思想是，我采用了隐藏表单的方法，然后将单击事件绑定到单选按钮上。在按钮单击处理程序中，我将所选单选按钮的值设置为隐藏表单中的隐藏字段值，然后提交隐藏表单。它作为AJAX请求提交，并在cOnController端处理JS响应

希望这有帮助

routes.rb

  root "welcome#index"

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

  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/controller/welcome\u controller.rb

  root "welcome#index"

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

  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/submit\u form\u response.js.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')

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

  - 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);

---

在广泛搜索了为什么会发生这种情况以及如何以最简单的方式修复它之后，我发现&多亏了我们应该使用此代码使其按预期工作：

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