解決したいこと

jQueryを使ってフォームに入力された値を自動計算したい

現状

現在フリマアプリを作成してます。出品する際に金額を指定するのですが、入力した金額の手数料と販売利益を自動で計算して表示してくれる機能を実装したいのですが出来ません。

試したこと

jsファイルに以下を記述してみたが動作しなかった。

products_new.js


$(function(){
  $('#price-result').change(function(){
    var s = $(#price-result).val();
    var result = s / 10;
  
    $('.haihun_tax').append(result);
  });
});

記述コード

new.html.haml

　　　省略

        .new_page_price
          %span.label_title
            販売価格
          %span.required 必須
          .price__table
            %span ¥
            %span 
              = form.text_field :price, placeholder: "0", id: "price-result"

        .new_page_main__sales_commission
          %span.sales_commission 販売手数料（10%）
          %span.haihun_tax ー
        %hr
        .new_page_main__profit
          %span.profit 販売利益
          %span.haihun-profit ー        

        %but.exhibit
          = form.submit '出品する', class:"submit-exhibit"
        %button.save 下書きに保存
        .escape 
          = link_to root_path do
            戻る

　　省略

##参考
rails 5.2.3
MySql

kei344

2020/05/10 08:06

「フォームノア入力」って何のことでしょう。何らかのプラグインの動作を指しているのでしょうか。

ren0826nosuke

2020/05/10 08:18

すいません！ jQueryを使ってフォームに入力された値を自動計算したい、の間違いでした！修正しました！

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

回答1件

ベストアンサー

とりあえず文法間違いがあるのでそこを直してみては。

js
1// var s = $(#price-result).val();
2//           ↓             ↓
3   var s = $('#price-result').val();
4// var s = $( this ).val(); // ちなみに普通こういう箇所ではこう書くと思います

追記：

これで試してみてください。あと、出力されたHTML（ブラウザで「ページのソースを表示」）に #price-result と .haihun_tax の要素が出力されているか確認してください。

js
1  $( document ).on( 'change', '#price-result', function(){
2    var s = $( this ).val();
3    var result = s / 10;
4    $('.haihun_tax').append(result);
5  });