質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

【計算フォーム】JavaScriptで複数の商品、個数に応じて割引

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,493

cross1115

score 10

 前提・実現したいこと

6つの商品があるとして、各それぞれ価格が違い、
まとめ買いをすると、数量によって価格が割引される。
(割引は、%ではなく、多くなればなるほど割引が大きくなる個数に応じた割引価格)

商品は複数選択可能なようにして、プルダウン、ラジオボタン、チェックボタンは不問。
個数はインプットで数量を入力タイプ。
自動で値段表示でも、ボタンを押して表示でもどちらでもいいので
それで総合計を表示させたいです。

Wordpress使用。
JavaScriptとHTMLで作ろうとしてしています。

 発生している問題・エラーメッセージ

基礎的な計算フォームはネット上に情報があるので、
それらを組み合わせたらなんとかなるかな?と思い、
色々と試行錯誤しましたが、お手上げ状態です。

載せているものはグチャグチャだと思うので、
既存のものをベースにして、足したり削ったりして、
求めているものになれ流ようにご指摘いただければ...
と思っております。

エラーメッセージ

 該当のソースコード

<script type="text/javascript">
<!--
function keisan(){

      //入力された数を取得
      var num = Number(document.getElementById('num').value);
      var mess = num + "個の購入ありがとうございます。\nお会計は" + field_total1 + "円です"
      //条件によって計算
      if(num >= 1 && num <= 199 ){
        var field_total1 = num * 430
      }
      if(num >= 200 && num <= 299 ){
        var field_total1 = num * 260
      }
      if(num >= 300 && num <= 999 ){
        var field_total1 = num * 215
      }
      if(num >= 1000 && num <= 1999 ){
        var field_total1 = num * 180
       }
      if(num >= 1999 && num <= 2999 ){
        var field_total1 = num * 170
      }
      if(num >= 3000){
        var field_total1 = num * 160
      }

      document.getElementById('showMoney').innerHTML = mess;


// 計算開始

var tax = 8; // 消費税率


var price1 = eval(document.form1.goods1.value) * document.form1.volume1.selectedIndex; // 数量×単価
var price2 = eval(document.form1.goods2.value) * document.form1.volume2.selectedIndex;
var price3 = eval(document.form1.goods3.value) * document.form1.volume3.selectedIndex;


var total1 = parseInt(price1) + parseInt(price2) + parseInt(price3); // 合計を計算
var tax2 = Math.round((total1 * tax) / 100); //消費税を計算

// フォームのテキストエリアに表示する金額
document.form1.field_total1.value = total1; // 合計を表示
document.form1.field_tax.value = tax2; // 消費税を表示
document.form1.field_total2.value = total1 + tax2; // 税込合計を表示



//右の窓に表示する金額
document.getElementById("display_account_amount").innerHTML = total1;
document.getElementById("display_account_tax").innerHTML = tax2;
document.getElementById("display_account_all").innerHTML = total1 + tax2;

}

// --> 
</script>

 HTML

<input type="text" id="num" placeholder="10">
<input type="button" value="購入価格の表示" onclick="keisan()">
<div id="showMoney"></div>

<p>下記項目を選択すると自動計算します。</p>
<form name="form1" action="" id="form1" method="post">
<table>
<tr>
<td>商品</td>
<td>&nbsp;</td>
<td>数量</td>
</tr>
<tr>
<td>果物</td>
<td><select name="price1" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="1000">すいか 1,000円</option>
<option value="450">いか 450円</option>
<option value="650">か 650円</option>
</select></td>
<td>
<input type="text" id="num1" placeholder="10">
<input type="button" value="購入価格の表示" onclick="keisan()">
</td>
</tr>
<tr>
<td></td>
<td><select name="goods2" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="500">牛肉(100g)500円</option>
<option value="400">豚肉(100g)400円</option>
<option value="300">鶏肉(100g)300円</option>
</select></td>
<td><select name="volume2" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td></td>
<td><select name="goods3" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="110">さけ 110円</option>
<option value="120">さば 120円</option>
<option value="130">いわし 130円</option>
</select></td>
<td><select name="volume3" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>合計</td>
<td><input type="text" name="field_total1" size="8" value="0"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>消費税</td>
<td><input type="text" name="field_tax" size="8" value="0"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>税込合計</td>
<td><input type="text" name="field_total2" size="8" value="0"></td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</div>

 試したこと

プラグインの「Calculated Fields Form」を試したのですが、
求めているのとは少し違いました。

参考サイト
こちらの記事を参考にしているのですが、1つの商品の場合だったので、
条件を変えるのが精一杯でした。

参考サイト
その下のコードはこちらから引っ張ってきています。

リンク
こちらのデモも商品を選んで個数を選んで割引になるのですが、
個数がそれぞれで変更できないのと、入力できないのでダメです...

 補足情報(FW/ツールのバージョンなど)

上記の内容を見ていただけると分かっていただけると思いますが、
JavaScript初心者なので、どうにか繫げたらなんとかなるかな?と
色々と試しましたが、どこをどう触ればいいのか途方に暮れています。
どうかお助け下さい。お願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • kei344

    2018/11/23 03:28

    (質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • cross1115

    2018/11/23 03:33

    指摘ありがとうございました。修正完了です。

    キャンセル

  • gucha

    2018/11/23 04:03

    ブラウザの開発者ツールとjavascriptのコンソールコマンドは使えますか?まずはコードが止まった箇所を自分で確認できるようになるのが良いと思います。今回の場合参照できていない箇所が複数存在します。例として数量×単価の”var price1”はdocument.form1.goods1 の参照で止まっています。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/11/23 16:10

    どの部分がわからないのでしょうか?質問を明確にしてください。全くわからないのであればHTMLとJavaScriptの基礎を学習すべきです。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る