質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • Ruby

    7943questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7495questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQuery

    6929questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ruby on Rails 5

    1976questions

入力値の自動計算&railsへ送信

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 183

 前提・実現したいこと

railsを用いて入力値を自動で計算してくれる入力フォームを作りたいです。
AirBnbの宿泊予約のシステムにあるようなものです。
このソースの書き方であっておりますでしょうか。

例:
https://www.airbnb.jp/rooms/70792?check_in=2018-06-12&guests=3&adults=3&check_out=2018-06-13&infants=1

予約フォーム作成進捗共有(↓作りたいもの)
https://gyazo.com/897f8d2d84e591c5dbb00be64fcf56db

 該当のソースコード

$(function(home) {
$("#reservation_new").on("input", function() {

    //滞在期間 -①
    var checkin_date = $('.checkin_date_input').val();
    var checkout_date = $('.checkout_date_input').val();
    var duration_of_stay = checkout_date - checkin_date;

    //宿泊料金(1日) -②
    var accomodation_fee = ${home.price.accomodation_fee};
    var number_of_guests = $('.number_of_guests_input').val();
    var fee_for_additional_people = ${home.price.additional_fee_per_person} * number_of_guests;

    //小計 ①+②
    var sub_total = (accomodation_fee + fee_for_additional_people) * duration_of_stay;

    //その他料金
    var cleaning_fee = $('.cleaning_fee_date_input').val();
    var service_fee = $('.service_fee_input').val();

    //合計
    var total_price = sub_total + cleaning_fee + service_fee


    $('.reservation_new__body--hidden').css({
      'display':'block'
    });

    $('.accomodation_fee_per_night').val(accomodation_fee);
    $('.total_price_input').val(total_price);

  })
});
.container#reservation_new
  = form_for [@home, @home_reservation] do |f|
    .col-md-8
      .reservation_new__heading.col-md-4
        .accomodation_fee_per_night
          = '#{@home.price.accomodation_fee}'
      .reservation_new__body
        .checkin_date
          = f.text_field :checkin_date, required: true, autofocus: true, placeholder: "チェックイン", class: "checkin_date_input"
          = f.text_field :checkout_date, required: true, autofocus: true, placeholder: "チェックアウト", class: "checkout_date_input"
          = f.text_field :number_of_guests, required: true, autofocus: true, placeholder: "ゲスト1人", class: "number_of_guests_input"
      .reservation_new__body--hidden
        = f.text_field :accomodation_fee, @home.price.accomodation_fee, required: true, class: "accomodation_fee_input"
        = f.text_field :cleaning_fee, @home.price.cleaning_fee, required: true, class: "cleaning_fee_date_input"
        = f.text_field :service_fee, @home.price.service_fee, required: true, class: "service_fee_input"
        = f.text_field :total_price, required: true, class: "total_price_input"

    .row.text-center.proto-btn
      = f.submit "予約をリクエスト", id: "button", class: "btn btn-lg btn-primary btn-block"

 補足情報(FW/ツールのバージョンなど)

現在作成中のためモデルのカラムの整合性が若干ずれています。
下記の流れで実装を考えておりますが、他に良いやり方があればご教示いただけると嬉しいです。

コントローラーから値取得→ビューで表示→JSで入力値をもとに計算→計算結果をrailsに送信

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • mts10806

    2018/06/09 06:53

    「送信」をどのレベルでかが把握できなかったのですが、htmlもご提示いただけますか。またJavaScript側に ${home.price.accomodation_fee}といった表現がありますが、テンプレートファイルに直書きしているという認識で良いでしょうか。

    キャンセル

  • mts10806

    2018/06/09 06:53

    「送信」をどのレベルでかが把握できなかったのですが、htmlもご提示いただけますか。またJavaScript側に ${home.price.accomodation_fee}といった表現がありますが、テンプレートファイルに直書きしているという認識で良いでしょうか。

    キャンセル

まだ回答がついていません

関連した質問

同じタグがついた質問を見る

  • Ruby

    7943questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7495questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQuery

    6929questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ruby on Rails 5

    1976questions