注文フォーム　合計金額を出力

幅１mmが100円、高さ１mmが１００円だとして合計を自動で円の四角の中に出力したいです。

html
1<div class="cnt_form">
2  <div class="area_size_form">
3    <div class="wrap_input">
4      <div class="wrap_input wrap_unit width">
5        <?= $this->Form->number('width', ['required' => false, 'placeholder' => '幅', 'id' => "width", 'step' => 0.01]); ?>
6        <span>mm</span>
7      </div>
8      <div class="wrap_input wrap_unit hight">
9        <?= $this->Form->number('height', ['required' => false, 'placeholder' => '高さ', 'id' => 'height', 'step' => 0.01]); ?>
10        <span>mm</span>
11      </div>
12      <div class="wrap_input wrap_unit total" data-ps="※概算">
13        <input type="text" id="total" name="total" value="" placeholder="">
14        <span>円</span>
15      </div>
16    </div>
17  </div>
18</div>

jquery
1<script>
2  $('#width').on('change', function () {
3    width = $(this).val();
4    price_width = width * 100;
5  });
6</script>
7
8<script>
9  $('#height').on('change', function () {
10    height = $(this).val();
11    price_height = height * 100;
12  });
13</script>
14
15<script>
16  $('#width, #height').on('change', function () {
17    total = price_width + price_height;
18  });
19</script>

上記のコードで合計金額の取得まではできたのですが、
その合計を自動で出力する方法がわかりません。
もしくは、このコードよりも効率的な方法がございましたらご教示いただきたいです。

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

回答1件

ベストアンサー

こんな感じですかね？

javascript
1<script>
2$(function(){
3  $('#width,#height').on('change', function () {
4    width = parseFloat($('#width').val());
5    height = parseFloat($('#height').val());
6    total = (width+height) * 100;
7    if (isNaN(width) || isNaN(height)) total ="";
8    $('#total').val(total);
9  }).eq(0).trigger('change');
10});
11</script>
12
13<div class="cnt_form">
14  <div class="area_size_form">
15    <div class="wrap_input">
16      <div class="wrap_input wrap_unit width">
17        <input type="number" name="width" id="width" placeholder="幅" step="0.01" min="0">
18        <span>mm</span>
19      </div>
20      <div class="wrap_input wrap_unit hight">
21        <input type="number" name="height" id="height" placeholder="高さ" step="0.01" min="0">
22        <span>mm</span>
23      </div>
24      <div class="wrap_input wrap_unit total" data-ps="※概算">
25        <input type="text" id="total" name="total" value="" readonly>
26        <span>円</span>
27      </div>
28    </div>
29  </div>
30</div>