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

现在需要选择单选按钮，然后点击提交按钮。如何将这个过程合并为一个动作？

- Bitwise

Answer 1

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

有几种方法可以做到这一点。

选项1-:onclick选项

使用radio_button助手，

<%= 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选项

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

此选项具有以下优点：

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

在这种情况下，我们将创建一个“单击提交”行为，我们可以使用它来增强您的单选按钮的行为。

首先是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 <= "JavaScript Behaviors" 部分

- Carlos Ramirez III