0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【jQuery】手数料を計算して表示させたい

Posted at

ユーザーが入力した数値に計算を加えて表示させる際の手順について
簡潔にまとめたのでご紹介します。
(今回は、価格と販売利益として表示します。)

1. HTMLで価格コーナーを準備する

sample.haml
~省略~

= f.number_field :price, placeholder: "0", class: 'exhibit-form_price' do -#入力欄
  %span.mark
    ¥
   .exhibit-form_right
.commission-line
  .commission-line_left
    販売手数料 (10%)
  .commission-line_right.profit-line
    .profit-line_left
      販売利益
    .profit-line_right
       ー

~省略~

2. Jsの準備をする

フォームの入力値を取得し、任意の計算をした数値を
販売利益の欄に差し込みます。

sample.js

  $('.exhibit-form_price').on('keyup', function(){
    var data = $(this).val();
    var profit = Math.round(data * 0.9)
    var fee = (data - profit)
    $('.commission-line_right').html(fee)
    $('.commission-line_right').prepend('¥')
    $('.profit-line_right').html(profit)
    $('.profit-line_right').prepend('¥')
    $('#price').val(profit)
    if(profit == '') {
    $('.profit-line_right').html('');
    $('.commission-line_right').html('');
    }
  })

以上で終了です。
ご覧いただきありがとうございました。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?