同时选择单选按钮并在Rails中提交表单

Question

现在我有一个选择特定plan_id的单选按钮。这很好，工作得很好。但是，我也希望它在选择时提交表格。有干净的方法吗？似乎应该有一个简单的方法，但我似乎无法找到它。

这是我的代码：

      <label>
        <input type="radio" id="plan_id_1" name="plan_id" value="1" />
        <%= f.submit "Select", class: "button-big reverse-blue" %>
      </label>

现在需要选择单选按钮，然后单击提交按钮。如何将其转化为一个动作？

Answer 1

您可以提交表单，而无需使用几行自定义JavaScript代码明确单击提交按钮。

有几种方法可以做到。

选项1 - :onclick选项

使用radio_button helper，

<%= f.radio_button :plan_id, 1 %>

您可以添加onclick选项，该选项需要一串JavaScript代码

<%= f.radio_button :plan_id, 1, onclick: "alert('Hello world!');" %>

在onclick代码中，您可以使用jQuery选择表单然后提交。你使用什么选择器取决于你。

// data attributes (my preference because it's explicit and flexible)
$('[data-target=my-form]')

// using jQuery's closest() method; "this" will refer to the radio button you clicked
$(this).closest(form)

// an ID or class
$("#my-form")
$(".my-form")

选择表单后，您只需要调用submit方法即可。

全部放在一起，

<%= f.radio_button :plan_id, 1, onclick: "$(this).closest('form').submit();" %>

选项2 - UJS选项

不显眼的JavaScript是通过JavaScript代码中的处理程序向DOM添加行为的过程，它响应事件并相应地触发操作。

此选项具有以下好处

1. 它是模块化的，可用于其他输入字段和表单
2. 它使JavaScript不在视图中

在这种情况下，我们会创建一个＆＃34;提交点击＆＃34;我们可以用来增强你的单选按钮的行为。

首先是JavaScript事件和处理程序

$(document).on("click", "[data-behavior=submit-on-click]", function() {
    $form = $(this).closest('form'); // select the form
    $form.submit(); // submit it
});

现在将特殊数据属性附加到单选按钮本身以启用该行为。

<%= f.radio_button :plan_id, 1, data: { behavior: "submit-on-click" } %>

我的惯例是使用data-behavior数据属性，但任何选择器都可以。

这种方法很好的部分是，如果你有多个单选按钮，你可以通过向每个按钮添加相同的数据属性来为它们提供所有相同的行为。

其他资源

• http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#unobtrusive-javascript
• https://signalvnoise.com/posts/3167-code-spelunking-in-the-all-new-basecamp＆lt; =＆＃34; JavaScript行为＆＃34;节