web-dev-qa-db-ja.com

Railsドロップダウンの変更時にフォームを送信しようとしています

私はAjaxを動作させており、組み込みRails javascript、送信ボタン付きです。ただし、ドロップダウンボックスの値を変更してボタンを削除したときに送信したいのですが、私の調査では正しい解決策のように見えるものが見つかりましたが、サーバーへのリクエストがありません。これがドロップダウンフォームコードです。：onchange：を追加する前に機能していた送信ボタンがまだあることに注意してください。

<% form_tag('switch_car', :method => :put, :remote => true) do %>
  <div class="field">
    <label>Car Name:</label>
    <%= select_tag(:id, options_from_collection_for_select(active_cars, "id", "name"), 
       :onchange => ("$('switch_car').submit()"))%><%= submit_tag "Switch Car" %>
  </div>    
<% end %>

生成されるHTMLは次のとおりです。

<form accept-charset="UTF-8" action="switch_car" data-remote="true" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="_method" type="hidden" value="put" />
    <input name="authenticity_token" type="hidden" value="PEbdqAoiik37lcoP4+v+dakpYxdpMkSm7Ub8eZpdF9I=" />
  </div>
  <div class="field"> 
    <label>Car Name:</label> 
    <select id="id" name="id" onchange="$('switch_car').submit()">
      <option value="9">Truck</option>
      <option value="10">Car</option>
    </select>
    <input name="commit" type="submit" value="Switch Car" /> 
</div>

助けてくれてありがとう。

ruby-on-rails-3formssubmit
17
Xaxum

これは私がそれを機能させるためにできたことです。 ：name => "switch_car"を使用してフォームにswitch_carという名前を付け、次のjavascriptを使用しました。

:onchange => ("javascript: document.switch_car.submit();")

私はまだより良い答えを探しているので、何か見つけたら更新します。これは、何らかの理由でsubmit.jsを使用しません。 AJAXを使用して、変化するページ要素のみを更新する送信ボタンとは異なり、HTMLとして処理します。しかし、これは私がこれまでに見つけた中で最高のものです。

6
Xaxum

Onchangeをこれに置き換えます。

onchange: "this.form.submit();"
21
konyak

フォームが_remote: true_であり、_Rails-ujs_が使用されている場合、this.form.submit()は機能しません。その場合、XHRの代わりに定期的な送信が行われます。

代わりに、次のことを行う必要があります。

_onchange: 'Rails.fire(this.form, "submit")'
_

詳細については、 ここ を読むことができます。

12
gamliela

使用しているjsライブラリに応じて：

プロトタイプ：:onchange => ("$('switch_car').submit()")

Jquery：:onchange => ("$('#switch_car').submit()")

デフォルトを使用していて、Railsバージョンが3.1未満の場合、プロトタイプがデフォルトのライブラリです。

5
amit_saxena

これはしばらく前からあったようですが、この説明はまだどこにも見つからないので、とにかく調査結果を投稿します。

私はこれに出くわしました 記事 これはsubmit()メソッド（jQueryまたはハンドラーの有無にかかわらず）を介してajaxリクエストをトリガーするときの問題を非常によく説明しています。次に、作成者は独自のAJAXリクエストを作成することをお勧めします。これは必須ではなく、 Rails.js （jquery- jus gem）。

Rails.jsが_submit.Rails_という名前空間のイベントをバインドしてリッスンするため、submit()のトリガーに関する問題が手動で発生します。送信を手動でトリガーするには

_   onchange: 'javascript: $( this ).trigger("submit.Rails")'
_

要素またはフォームに。

2
Jubke

JQueryを使用したより一般的な解決策（フォームの名前を知る必要はありません）は次のとおりです。

onchange: "$(this).parent('form').submit();"
2
Martin M

Select_tagの場合は、次を追加するだけです。

{:onchange => "myHandler();" }

ハンドラーは次のようになります。

this.form.submit();

また、onchangeが機能しない場合は、大文字のCを使用してonChageを試してみてください。

最後に、select_tagをフォームselectと混同しないように注意してください。

フォームの選択に関してのみ、同様の質問に対する私の回答を参照してください

フォーム選択へのOnchangeイベントの追加

1
AmitF

Railsフィールドでのajax送信の変更方法を学びたい場合は、ここにコードがあります。

<%= select_tag(:id, options_from_collection_for_select(active_cars, "id", "name"), 
data: { remote: true, url: your_ajax_route_path }%><%= submit_tag "Switch Car" %>

データ：{リモート：true、URL：your_ajax_route_path}

入力をyour_ajax_route_pathに自動的に送信します。フォームビルダーを使用している場合は、input_htmlとともに使用する必要があります

input_html: { data: { remote: true, url: your_ajax_route_path } }

このような。お役に立てば幸いです

0
M. Samil Buyukcaglayan

どのソリューションも機能していなかったので、以下のソリューションを使用しました。

$("#q_dimension_id_eq").on("change", function (e) {
        $(this).closest("form").submit();
    });
0
Iqbal Khan