前提・実現したいこと
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> </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> </td> <td> </td> <td> </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> </td> </tr> <tr> <td>消費税</td> <td><input type="text" name="field_tax" size="8" value="0"> 円</td> <td> </td> </tr> <tr> <td>税込合計</td> <td><input type="text" name="field_total2" size="8" value="0"> 円</td> <td> </td> </tr> </table> </form> </div>
試したこと
プラグインの「Calculated Fields Form」を試したのですが、
求めているのとは少し違いました。
参考サイト
こちらの記事を参考にしているのですが、1つの商品の場合だったので、
条件を変えるのが精一杯でした。
参考サイト
その下のコードはこちらから引っ張ってきています。
リンク
こちらのデモも商品を選んで個数を選んで割引になるのですが、
個数がそれぞれで変更できないのと、入力できないのでダメです...
補足情報(FW/ツールのバージョンなど)
上記の内容を見ていただけると分かっていただけると思いますが、
JavaScript初心者なので、どうにか繫げたらなんとかなるかな?と
色々と試しましたが、どこをどう触ればいいのか途方に暮れています。
どうかお助け下さい。お願い致します。
あなたの回答
tips
プレビュー