マニュアルスパイラルTIPSスパイラルデモ無料トライアルトライアルナビツアーCONTACT新規SPIRALご担当者様向けガイドホーム設定Tips数量と単価で金額を自動計算するフォーム設定TipsシェアするLINE!こんにちは!若手エンジニアのスパ子です(‘-‘*)今回は数量と単価で金額を自動計算する方法をご紹介します。参考DEMOはこちら商品を選択し、数量を入れると小計・総合計が自動計算されます。DBの設定(商品マスタDB、注文DB)商品プルダウンを作成するための「商品マスタDB」、注文データを格納する「注文DB」を作成します。※当記事内でご紹介するプログラムコードでは下記のDBタイトル・差し替えキーワードを利用します。別名で設定される場合は、都度、読み替えを行ってください。☆を1〜5まで繰り返してください。注文用のフォームを作成します。注文DBより新規フォームを作成し、以下の設定にします。:入力項目として使用する※今回ご紹介するプログラムを利用するために、デモと同じHTML構成で作成してください。今回は「スパイラルAPI」を利用するため、スパイラル管理画面より「スパイラルAPI」を発行します。(1)開発>スパイラルAPIをクリックします。(2)「トークン発行」をクリックします。(3)各設定をおこない「発行する」をクリックします。商品プルダウン用のデータ取得スパイラルAPI/PHPを利用し、商品マスタDBのデータを取得し、配列にします。下記のコードを注文フォーム>入力ページに貼り付けてください。json_encode($list2);?>※APIタイトルとは下記の赤枠内のことを指します。POSTされた値を取得1入力エラーとなった時2確認ページから入力ページに戻った時、選択された値をセットします。注文フォーム>入力ページに下記のコードを貼り付けてください。上記4で取得した商品データの配列をjQueryで加工し、商品プルダウンを作成します。(1)今回はjQueryを利用するため、注文フォーム>入力ページにjQueryを読み込んでください。(2)注文フォーム>入力ページの以下の「商品番号1」の<input>タグを削除します。>(3)注文フォーム>入力ページ内の「商品番号1」の<input>タグがあった場所に、以下のプルダウン作成処理を貼り付けます。data="0">選択してください</option></select>(4)上記(2)(3)を商品番号2〜商品番号5まで繰り返します。※HTML内の末尾の番号は2〜5の連番に書き換えてください。(5)注文フォーム>入力ページに以下のコードを追記します。「商品DB」から取得したデータを利用してプルダウンを作成しています。null)で、送信された値が存在する場合(入力エラーや確認ページから戻った時)、該当する商品・金額を再設定します。自動設定用の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”」を追記します。金額計算用のjQueryの埋め込み注文フォーム>入力ページに金額計算用のjQueryを埋め込みます。});});</script>以上で設定は完了です。誤ってデータベースの中身を削除してしまった!という時に備える、データバックアップの方法についてご紹介します。最新バージョン1.12.5。フォームのHTMLソース編集方法と注意点スパイラル®はHTML、CSS、JS、PHPなどを使いWEBフォームをカスタマイズすることができます。今回は住所情報をもとに地図を表示するデモを2種類ご紹介します。ディベロッパーズサイト|パイプドビッツ.。