Help us understand the problem. What is going on with this article?

[JQ] 計算結果をリアルタイムで表示

More than 1 year has passed since last update.

はじめに

手数料計算を行い、引かれる手数料とその計算結果を表示。そして、入力した値ではなく、計算結果をデーターベースに格納する機能を実装したいと思う。

view

sample.html.haml
        .product_price
          .product_price-group
            .product_header
              価格
            .product_require
              必須 
          .product_price-form
            ¥
            %input#price_calc.price_form-box{placeholder: "例) 300", type: "number"}/
             // ↑ 数値を入力するためだけのフオームを作成。
          .product_price-fee
            販売手数料(10%)
            .right_bar

          .product_profit
            販売利益
            = f.number_field :price, style: "display: none", id: "price"
             // ↑ 計算結果格納用フォーム。単なる数値をデータベースに入れるためだけの箱なので、見えないようにstyle: "display: none"`で隠している。
            .right_bar_2
sample.js
$(function(){
  $('#price_calc').on('input', function(){   //リアルタイムで表示したいのでinputを使う。入力の度にイベントが発火するようになる。
    var data = $('#price_calc').val(); // val()でフォームのvalueを取得(数値)
    var profit = Math.round(data * 0.9)  // 手数料計算を行う。dataにかけているのが0.9なのは単に引きたい手数料が10%のため。
    var fee = (data - profit) // 入力した数値から計算結果(profit)を引く。それが手数料となる。
    $('.right_bar').html(fee) //  手数料の表示。html()は追加ではなく、上書き。入力値が変わる度に表示も変わるようにする。
    $('.right_bar').prepend('¥') // 手数料の前に¥マークを付けたいので
    $('.right_bar_2').html(profit)
    $('.right_bar_2').prepend('¥')
    $('#price').val(profit) // 計算結果を格納用フォームに追加。もし、入力値を追加したいのなら、今回はdataを引数に持たせる。
    if(profit == '') {   // もし、計算結果が''なら表示も消す。
    $('.right_bar_2').html('');
    $('.right_bar').html('');
    }
  })
})

Math.roundは、引数で与えた数値を四捨五入して、もっとも近似の整数を返す。
html()はappendなどと違い、出力が上書きされる。

さいごに

間違いがあったらご指摘ください。

potterqaz
webエンジニアを目指して勉強中。 ブログで駆け出しエンジニアのためになる記事を書いています。
https://shura.design/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした