非同期でformで入力した数値をcontrollerのメソッドに渡しメソッド内でその数値を用いて計算しブラウザに出力したい

前提・実現したいこと

index.html.hamlのformで入力した数値をcontrollerのhogeメソッドに渡し、メソッド内でその数値を用いて計算を行い、非同期でブラウザに出力が行えるようにしたいです。

例えば、controllerのhogeメソッドに渡された値を二倍にして返すというロジックだったとし、ブラウザ上のformで2という値を入力しsubmitすると非同期でブラウザ上に4という値が出力されるようなイメージです。

index.html.haml

ruby
1= form_with url: 'hoge' do |f|
2    = f.text_field :number
3    = f.submit '計算する'

calculate.controller.rb

def hoge
  # formで入力しsubmitした値を二倍するロジック
end

疑問点

大まかな流れは、非同期なのでajaxを用いformが送信されたらjsファイルでイベントが発火→jbuilderを使用し値をjson形式で返す→帰ってきたjsonをdoneメソッドで受け取りHTMLを作成。と思いますが、どのタイミングで入力値をコントローラに渡して計算、またはどのようにすればそのようなロジックを組み込めるかご教示い頂ければ幸いです。

注意点

jsで計算を行わず、controllerのメソッドでどうしても計算が行いたいのでご理解よろしくお願いします…

行動規範の内容に同意します

回答2件

Rubyわかるわけではないので考え方だけ

どのタイミングで入力値をコントローラに渡して計算

一般的には、「計算させたいタイミング」をJavaScriptでイベントを拾ってAjaxでサーバーサイドに投げます。
つまり仕様次第。
そもそもAjaxはformのsubmitを行うのではなく、JavaScriptから直接サーバー側に送信することが多いです。
ボタンのクリックイベントや入力フォームのフォーカスアウトや入力をJavaScriptで拾いましょう。

投稿2019/11/25 23:59

編集2019/11/27 07:30