ユーザーが入力した数値に計算を加えて表示させる際の手順について
簡潔にまとめたのでご紹介します。
(今回は、価格と販売利益として表示します。)
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('');
}
})
以上で終了です。
ご覧いただきありがとうございました。