今すぐラジオボタンを押して、特定のplan_idを選択します。それは素晴らしいですし、うまく動作します。しかし、私はまた、選択時にフォームを提出したい。これを行うためのきれいな方法がありますか？それは簡単な方法があるように思われるが、私はそれを見つけるように見えない。ここでラジオボタンを選択してフォームを送信する
が私のコードです：
<label>
<input type="radio" id="plan_id_1" name="plan_id" value="1" />
<%= f.submit "Select", class: "button-big reverse-blue" %>
</label>
今のところ、これは送信ボタンをクリックし、ラジオボタンの選択が必要です。これをどのように1つのアクションに変えることができますか？
カスタムJavaScriptコードを数行挿入して送信ボタンを明示的にクリックしなくても、フォームを送信できます。
いくつかの方法があります。
onclickコードで<%= f.radio_button :plan_id, 1, onclick: "alert('Hello world!');" %>
の文字列を取りonclickオプションを追加することができますradio_button helper、
<%= f.radio_button :plan_id, 1 %>
を使用して: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();" %>
控えめなJavaScriptはイベントに応答し、それに応じてアクションをトリガーするJavaScriptコード内のハンドラを経由してDOMに振る舞いを追加するプロセスです。
このオプションでは、それはモジュラーだと、他の入力フィールドに使用することができます
の外にはJavaScriptを続け形成たちその動作でラジオボタンを強化するために使用できる「クリックによる送信」動作を作成します。
まず
$(document).on("click", "[data-behavior=submit-on-click]", function() {
$form = $(this).closest('form'); // select the form
$form.submit(); // submit it
});
今すぐラジオボタン自体に特別なデータ属性を追加するJavaScriptのイベントハンドラは動作を有効にします。
<%= f.radio_button :plan_id, 1, data: { behavior: "submit-on-click" } %>
私の規則はdata-behaviorデータ属性を使用することですが、どのセレクタは大丈夫です。
このアプローチの素晴らしい点は、複数のラジオボタンがある場合、それぞれに同じデータ属性を追加するだけで、同じ動作を与えることができることです。