ホーム 技術ネタ

input type="hidden"の中の複数の数字をJSで合計する

概要

みなさんこんにちわ!本日は、input type="hidden" の中に入った要素の数字を合計してHTML5で表示すると言うものです。

仕様

やりたかったことは、ECサイトを作っていて、dbからお客様のカートの情報を取得し、カートに入った商品の合計値をフロント側で表示を調整するというもの

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="hidden" class='num_parts' value="0" />
<input type="hidden" class='num_parts' value="2" />
<span id="total"></span>

<script>
       var calculated_total_sum = 0;
       $(".num_parts").each(function () {
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
        $("#total").html(calculated_total_sum);
</script>

 

説明

ここで、htmlの要素のclassを取得して、eachで回しています

$(".num_parts").each(function () {

ここで、inputの数字をそれぞれ足し算しています

calculated_total_sum += parseFloat(get_textbox_value);

ここで、最終の合計値をhtmlへ描画しています

$("#total").html(calculated_total_sum);
Pocket
LinkedIn にシェア



技術 x マーケティングの支援ならOFFで一貫支援、承ります。詳しくは下記のURLから↓ ⭐️

マーケティングと、システム開発のプロフェッショナル集団が御社の課題の解決をお手伝いします

-ホーム, 技術ネタ
-, , , , , , , , , ,

Copyright© off , 2020 All Rights Reserved Powered by AFFINGER5.