数量と単価で金額を自動計算するフォーム

シェアする

こんにちは!若手エンジニアのスパ子です(‘-‘*)

今回は数量と単価で金額を自動計算する方法をご紹介します。

参考DEMOはこちら商品を選択し、数量を入れると小計・総合計が自動計算されます。

▼目次

1. DBの設定(商品マスタDB、注文DB)
2. フォームの設定
3. スパイラルAPIを発行
4. 商品プルダウン用のデータ取得
5. POSTされた値を取得
6. 商品プルダウンを生成
7. 自動設定用のclass名とIDを追記
8. 金額計算用のjQueryの埋め込み

1. DBの設定(商品マスタDB、注文DB)

商品プルダウンを作成するための「商品マスタDB」、注文データを格納する「注文DB」を作成します。

※当記事内でご紹介するプログラムコードでは下記のDBタイトル・差し替えキーワードを利用します。別名で設定される場合は、都度、読み替えを行ってください。

商品マスタDB

DB名:商品マスタDB
DBタイトル:itemMstDB
各フィールド設定:
・フィールド名:商品番号
   フィールドタイプ:数字・記号・アルファベット(32 bytes)
   差し替えキーワード:itemCode
・フィールド名:商品名
   フィールドタイプ:テキストフィールド(128 bytes)
   差し替えキーワード:itemName
・フィールド名:単価
   フィールドタイプ:通貨
   差し替えキーワード:price

注文DB

DB名:注文DB
DBタイトル:orderDB
各フィールド設定:
・フィールド名:注文ID
   フィールドタイプ:数字・記号・アルファベット(32 bytes)
   差し替えキーワード:orderID
・フィールド名:注文者名
   フィールドタイプ:テキストフィールド(64 bytes)
   差し替えキーワード:order
・フィールド名:メールアドレス
   フィールドタイプ:メールアドレス(大・小文字無視)
   差し替えキーワード:email
・フィールド名:商品番号1 
   フィールドタイプ:数字・記号・アルファベット(32 bytes)
   差し替えキーワード:itemCode1
・フィールド名:商品名1 
   フィールドタイプ:テキストフィールド(128 bytes)
   差し替えキーワード:itemName1
・フィールド名:数量1 
   フィールドタイプ:整数
   差し替えキーワード:quantity1
・フィールド名:小計1 
   フィールドタイプ:通貨
   差し替えキーワード:subtotal1
※ ☆を1〜5まで繰り返してください。
・フィールド名:総合計金額(税込み)
   フィールドタイプ:通貨
   差し替えキーワード:totalAmount

2. フォームの設定

注文用のフォームを作成します。

注文DBより新規フォームを作成し、以下の設定にします。
・注文ID
   入力設定:使用しない
・商品名1〜商品名5
   入力設定:特殊入力 値を引き継ぐ(hidden)
・上記以外
   入力設定:入力項目として使用する

※今回ご紹介するプログラムを利用するために、デモと同じHTML構成で作成してください。

3. スパイラルAPIを発行

今回は「スパイラルAPI」を利用するため、スパイラル管理画面より「スパイラルAPI」を発行します。

(1)開発>スパイラルAPIをクリックします。
スパイラルAPI
(2)「トークン発行」をクリックします。
スパイラルAPI2
(3)各設定をおこない「発行する」をクリックします。
スパイラルAPI3

4. 商品プルダウン用のデータ取得

スパイラルAPI/PHPを利用し、商品マスタDBのデータを取得し、配列にします。
下記のコードを注文フォーム>入力ページに貼り付けてください。

<!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=ON NAME=SAMPLE -->
<?php
// 商品データ取得
$SPIRAL->setApiTokenTitle("※上記3で発行したAPIタイトル");
$selectdb1 = $SPIRAL->getDataBase("itemMstDB");
$selectdb1->addSelectFields("itemCode", "itemName","price");
$selectdb1->addSortField("itemCode");
$searchResult1 = $selectdb1->doSelect();
$list1 = $searchResult1["data"];
$list2 = array_values($list1);
$itemList = json_encode($list2);
?>
※APIタイトルとは
下記の赤枠内のことを指します。

APIタイトル
例)$SPIRAL->setApiTokenTitle(“sample”);

5. POSTされた値を取得

①入力エラーとなった時②確認ページから入力ページに戻った時、選択された値をセットします。
注文フォーム>入力ページに下記のコードを貼り付けてください。

<?php
$itemCode1 = $_POST['itemCode1'];
$price1 = $_POST['price1'];
$itemCode2 = $_POST['itemCode2'];
$price2 = $_POST['price2'];
$itemCode3 = $_POST['itemCode3'];
$price3 = $_POST['price3'];
$itemCode4 = $_POST['itemCode4'];
$price4 = $_POST['price4'];
$itemCode5 = $_POST['itemCode5'];
$price5 = $_POST['price5'];

$array_post = array('itemCode1' =>$itemCode1, 'price1' => $price1, 'itemCode2' =>$itemCode2, 'price2' => $price2, 'itemCode3' =>$itemCode3, 'price3' => $price3, 'itemCode4' =>$itemCode4, 'price4' => $price4, 'itemCode5' =>$itemCode5, 'price5' => $price5);
$json_str = json_encode($array_post);
?>

6. 商品プルダウンを生成

上記4で取得した商品データの配列をjQueryで加工し、商品プルダウンを作成します。

(1)今回はjQueryを利用するため、注文フォーム>入力ページにjQueryを読み込んでください。

(2)注文フォーム>入力ページの以下の「商品番号1」の<input>タグを削除します。

<input class="input $errorInputColor:itemCode1$" type="text" name="itemCode1" value="$itemCode1$" maxlength="32" >

(3)注文フォーム>入力ページ内の「商品番号1」の<input>タグがあった場所に、以下のプルダウン作成処理を貼り付けます。

<select class="itemCode" name="itemCode1">
  <option value="" data="0">選択してください</option>
</select>

(4)上記(2)(3)を商品番号2〜商品番号5まで繰り返します。
※HTML内の末尾の番号は2〜5の連番に書き換えてください。

(5)注文フォーム>入力ページに以下のコードを追記します。
「商品DB」から取得したデータを利用してプルダウンを作成しています。

<script type="text/javascript">
$(function(){
var list = <?php echo $itemList; ?>;
var list1 = JSON.stringify(list);
var list2 = JSON.parse(list1);
$.each(list2, function(index, itemInfo){
  $('.itemCode').append($('<option>').text(itemInfo["itemName"]).attr({value : itemInfo["itemCode"] ,data : itemInfo["price"]}));
});
var post = <?php echo $json_str ?>;
var postList = JSON.stringify(post);
var postList2 = JSON.parse(postList);
var postFirst = postList2["itemCode1"];
if(postFirst == null){
  return false;
}else{
  $('[name=itemCode1]').val(postList2["itemCode1"]);
  $('[name=price1]').val(postList2["price1"]);
  $('[name=itemCode2]').val(postList2["itemCode2"]);
  $('[name=price2]').val(postList2["price2"]);
  $('[name=itemCode3]').val(postList2["itemCode3"]);
  $('[name=price3]').val(postList2["price3"]);
  $('[name=itemCode4]').val(postList2["itemCode4"]);
  $('[name=price4]').val(postList2["price4"]);
  $('[name=itemCode5]').val(postList2["itemCode5"]);
  $('[name=price5]').val(postList2["price5"]);
};
});
</script>

if(postFirst == null)で、送信された値が存在する場合(入力エラーや確認ページから戻った時)、該当する商品・金額を再設定します。

7. 自動設定用のclass名とIDを追記

jQueryで値を自動設定するため、注文フォーム>入力ページの必要なタグにclass名とID名を追記します。

(1)商品名の<input>タグ(name=itemName1〜itemName5)のclass名に「itemName」を追記します。

(2)単価の<input>タグ(name=price1〜price5)のclass名に「price」を追記します。

(3)数量の<input>タグ(name=quantity1〜quantity5)のclass名に「quantity」を追記します。

(4)小計の<input>タグ(name=subtotal1〜subtotal5)のclass名に「subtotal」を追記します。

(5)総合計の<input>タグ(name=totalAmount)のclass名に「totalAmount」を追記します。

(6)<table>タグに「id=”table”」を追記します。

8. 金額計算用のjQueryの埋め込み

注文フォーム>入力ページに金額計算用のjQueryを埋め込みます。

<script type="text/javascript">
//selectedの値段を取得する
$('select').change(function(){
  var target = $("option:selected",this).attr("data");
  var target2 = $("option:selected",this).text();
  $(this).parent().parent().parent().find(".price").val(target);
  $(this).parent().parent().find(".itemName").val(target2);
  $(this).parent().parent().parent().find(".quantity").val(0);
  $(this).parent().parent().parent().find(".subtotal").val(0);
});

//小計を取得する
$(document).on('change','.quantity',function(){
  if(!$(this).val().match(/^([1-9]\d*|0)$/)){
    $(this).val(0);
    $(this).parent().parent().parent().parent().find('.subtotal').val(0);
  }else{
    var q = parseInt($(this).val(),10);
    p = 0;
    var p = $(this).parent().parent().parent().parent().find(".price").val().replace(/,/g,'');
    var p = parseInt(p,10);
    var result = q*p;
    subtotal = String(result).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
    $(this).parent().parent().parent().parent().find(".subtotal").val(subtotal);
  };
});

//総計を取得する
$(document).on('keyup change','#table',function(){
  var total = 0;
  $('#table .subtotal').each(function(){
    var sub = $(this).val().replace(/,/g,'');
    if(!(sub).match(/^([1-9]\d*|0)$/)){
      return;
    }else if(!sub){
      return;
    }else{
    var sub = parseInt(sub,10);
    total += sub;
    var tax = 8;
    var tax2 = Math.round((total*tax)/100);
    var totalAmount = total + tax2;
    var totalAmount = String(totalAmount).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
 $('.totalAmount').val(totalAmount);
};
  });
});
</script>

以上で設定は完了です。

最後まで読んでいただき、ありがとうございました(*^^*)!

シェアする

フォローする