料金計算フォームの制作における計算結果の代入について
- 計算結果を変数に代入し、条件分岐による割引前の値段で計算されてしまう問題が発生しました。
- 小計を表示するための値を次の計算に代入することで問題が解決できる可能性があります。
- アドバイスをいただきたいです。
- ベストアンサー
計算結果を変数に代入
とあるサービスの料金計算フォームを制作しています。 特定の場合のみ料金が割引されるので、if構文で条件分岐してみたところ、 計算結果（小計）にはうまく反映されるのですが、いくつかの小計を合計すると、 if構文で分岐する前の（つまり割り引き前の）値段で計算されてしまいます。 // 小計１ var total_01 = document.form_test.price_01.options [document.form_test.price_01.selectedIndex].value * document.form_test.goods_01.options [document.form_test.goods_01.selectedIndex].value + document.form_test.price_02.options [document.form_test.price_02.selectedIndex].value * document.form_test.goods_02.options [document.form_test.goods_02.selectedIndex].value ; // 小計１ document.form_test.F-total_01.value = total_01; // 小計１を表示 if (document.form_test.price_01.options [document.form_test.price_01.selectedIndex].value != 0 && document.form_test.price_02.options [document.form_test.price_02.selectedIndex].value != 0) {document.form_test.F-total_01.value = total_01 - 500;} // 両方で-500 if (total_01 <= 0) {document.form_test.F-total_01.value = 0;} // 合計 var total_all = total_01 + total_02 + total_034; // 合計 document.form_test.F-total_all.value = total_all; // 合計を表示 小計を表示する <INPUT TYPE="text" NAME="F-total_01" VALUE="0"> に出てきた値を、そのまま次の計算に代入できれば 解決するのではないかと思うのですが、行き詰ってしまいました。 どうかアドバイスをよろしくお願いいたします。
- de_n
- お礼率85% (12/14)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
実際「day_01」のselectが１つでいいのかどうか分かりませんが、 おっしゃる通りに書くとこのようになると思います。価格は適当 に設定しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function PriCal(){ var obj_t1= document.form_test.time_11; var obj_t2= document.form_test.time_21; var obj_t3= document.form_test.time_31; var obj_d1= document.form_test.day_01; var price_11 = obj_t1.options[obj_t1.selectedIndex].value * obj_d1.options[obj_d1.selectedIndex].value + obj_t2.options[obj_t2.selectedIndex].value * obj_d1.options[obj_d1.selectedIndex].value + obj_t3.options[obj_t3.selectedIndex].value * obj_d1.options[obj_d1.selectedIndex].value; // 計算 // 小計を小計欄に表示 document.form_test.F_price_11.value = price_11; //Goods-1とGoods-2を両方買った場合にはその合算から455円を引く if (obj_t1.options[obj_t1.selectedIndex].value != 0 && obj_t2.options[obj_t2.selectedIndex].value != 0) {var afterOff = price_11 - 455;} //条件を満たした場合の値引き金額を変数afteroffとする //Goods-1とGoods-2を両方買わず、Goods-3だけを買った場合は値引きせず合計とする else var afterOff=obj_t3.options[obj_t3.selectedIndex].value * obj_d1.options[obj_d1.selectedIndex].value; //何も買わなければ小計欄に「0」を入力 if (price_11 <= 0) {document.form_test.F_price_11.value = 0;} //合計金額を合計欄に表示 document.form_test.F_total_all.value = afterOff; } </script> </head> <body> <form name="form_test"> Goods-1:<select name="time_11"> <option value="0">0</option> <option value="600">600</option> <option value="500">500</option> </select> Goods-2:<select name="time_21"> <option value="0">0</option> <option value="400">400</option> <option value="300">300</option> </select> Goods-3:<select name="time_31"> <option value="200">200</option> <option value="100">100</option> </select> day:<select name="day_01"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> 小計<input type="text" name="F_price_11" value="0"> 合計<input type="text" name="F_total_all" value="0"> <input type=button value="計算" onclick="PriCal()"> </form> </body> </html>
その他の回答 (2)
>>No.1 訂正...orz - - script - - document.form_test.F_total_01.value = total_01; // 小計１を表示 if (obj_p1.options [obj_p1.selectedIndex].value != 0 && obj_p2.options[obj_p2.selectedIndex].value != 0) {res_01=document.form_test.F_total_01.value = total_01 - 500;} // var res_01 if (total_01 <= 0) {res_01=document.form_test.F_total_01.value = 0;} // 合計 var total_all = res_01 + res_02 + res_034; // 合計 document.form_test.F_total_all.value = total_all; // 合計を表示
補足
早速の回答ありがとうございます！ なんとなく分かった気になって試してみたのですが、 うまくいきません…小計１は表示されるのですが、 小計２～４が機能しなくなってしまいました。 objの名前の付け方（？）が間違っているような・・・ 色々調べてみたのですが、初心者すぎて分かりません。 （１冊本を買おうかしら・・・） 商品が３つあって、そのうち２つを買うと値引き、 あと１つは買っても買わなくても関係ない、のですが、 それだとスクリプト変わってきますか？ - - script - - var price_11 = document.form_test.time_11.options [document.form_test.time_11.selectedIndex].value * document.form_test.day_01.options [document.form_test.day_01.selectedIndex].value + document.form_test.time_21.options [document.form_test.time_21.selectedIndex].value * document.form_test.day_01.options [document.form_test.day_01.selectedIndex].value + document.form_test.time_31.options [document.form_test.time_31.selectedIndex].value * document.form_test.day_01.options [document.form_test.day_01.selectedIndex].value; // 計算 document.form_test.F_price_11.value = price_11; // 小計を表示１ if (obj_t21.options[obj_t21.selectedIndex].value != 0 && obj_t31.options[obj_t31.selectedIndex].value != 0) {res_11=document.form_test.F_price_11.value = price_11 - 455;} // var res_11 if (price_11 <= 0) {res_11=document.form_test.F_price_11.value = 0;} // 合計 var total_a = res_11 + res_12 + res_13 + res_14; // 合計 document.form_test.F_total_a.value = total_a; // 合計を表示 最初の質問とは若干変わってます。 的外れだったらごめんなさい。 よろしくお願いします。
- - HTML - - × <INPUT TYPE="text" NAME="F-total_01" VALUE="0"> ○ <INPUT TYPE="text" NAME="F_total_01" VALUE="0"> - - script - - document.form_test.F_total_01.value = total_01; // 小計１を表示 if (obj_p1.options [obj_p1.selectedIndex].value != 0 && obj_p2.options[obj_p2.selectedIndex].value != 0) {res_01=document.form_test.F_total_01.value = total_01 - 500;} // var res_01 if (total_01 <= 0) {res=document.form_test.F_total_01.value = 0;} // 合計 var total_all = res_01 + res_02 + res_034; // 合計 document.form_test.F_total_all.value = total_all; // 合計を表示
関連するQ&A
- Javascript 計算後の３桁区切り
ホームページ用見積もりフォームをJavascriptで自動計算 縦に長いページで一番下に計算結果を表示 ページをスクロールしても、何時でも計算結果が見られるように、別のウィンドウ（レイヤー）でページ内に表示。 以上までは出来ました。 最後に計算結果を３桁区切りで表示させたいのですが、上手く出来ません。 お知恵をお貸しくださいませ。 Javascriptは外部参照しております。 ３桁区切りのJavascriptを外部参照している同一のページに記入した方が良いか、別参照の方が良いかも教えていただければ幸いです。 以下がJavascriptのコードになります。 function keisan(){ // 設定開始 var tax = 5; // 消費税率 // 商品1 var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value; // 商品2 var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value; // 商品3 var price3 = document.form1.goods3.options[document.form1.goods3.selectedIndex].value; // 合計を計算 var total1 = parseInt(price1) + parseInt(price2) + parseInt(price3) ; // 設定終了 document.form1.field_total1.value = total1; // 合計を表示 var tax2 = Math.round((total1 * tax) / 100); 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; }
- ベストアンサー
- JavaScript
- メールフォーム内の自動計算 valueの値を2つの目的で使いたい
以下の様な形で、自動計算フォームを作っています。 金額は「value=" "」から計算されているのですが、この部分は同時に使おうと思っているメール送信の商品名の部分にあたります。 このまま送信してしまうと、商品名が数字だけになってしまうのですが、何かよい方法をご存知でしょうか・・・。 メール送信のプログラムは私の方では変えられないので、出来れば以下の自動計算フォームを変える事で解決できたらと思っています。 javascriptは専門ではないのですが、こつこつ勉強中です。よろしくお願いいたします。 -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- function cal(){ var price1 = document.mail_form.goods1.options[document.mail_form.goods1.selectedIndex].value; var price2 = document.mail_form.goods2.options[document.mail_form.goods2.selectedIndex].value; var total = parseInt(price1) + parseInt(price2); document.mail_form.field_total.value = total; // 合計 } // --> </script> </head> <body> <form name="mail_form"> <p id="mail-form-box1"> ●商品１<br /> <select name="goods1" onChange="cal()"> <option value="100">バッグA 100円</option> <option value="200">バッグB 200円</option> <option value="300">バッグC 300円</option> </select> </p> <p id="mail-form-box2"> ●商品２<br /> <select name="goods2" onChange="cal()"> <option value="100">靴A 100円</option> <option value="200">靴A 200円</option> <option value="300">靴A 300円</option> </select> </p> 合計: ＄<input type="text" name="field_total" value="0"><BR> </form> </body> </html> --------------------------------------------------------
- ベストアンサー
- JavaScript
- jacascriptとフォームselectメニューで計算した値を保存したい
お世話になります。 javascriptを使った計算を勤め先で必要ということで、社内で少しパソコンに詳しいという理由で自分が手がけることになりましたorz 色々と検索しながら勉強し、ようやく思い通りのプログラムを見つけて参考にしながら実践してみたのですが、思い通りにならない箇所が一部ありまして困っています。 参考にしたのは以下のサイトなのですが、 ttp://www.tagindex.com/javascript/form/comp1b.html セレクトメニューから選んだ値を特定の数値で掛けそれを合計するという流れなのですが、このスクリプトだと、一度計算を終えると、もう一度セレクトメニューから値を選択しないと値が０になってしまっているのです。 希望としては、この選択した値を保存しておき、計算が終わってもそれ以前の選択状況のままにしておきたいんですが、どうやればできるでしょうか？ <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- Javascript 足し算
ホームページ用見積もりフォーム 商品の値段を合計する。 一個ずつ足しての計算で処理してるのですが、商品がかなりの数になりそうです。 エクセルのSUMのように商品１から商品1000までを計算する関数を教えていただきたいと思っています。 JavaScriptは外部参照しています。 以下がJavaScriptのコードになります。 function keisan(){ // 設定開始 var tax = 5; // 消費税率 // 商品1 var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value; // 商品2 var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value; // 商品3 var price3 = document.form1.goods3.options[document.form1.goods3.selectedIndex].value; // 合計を計算 var total1 = parseInt(price1) + parseInt(price2) + parseInt(price3); // 設定終了 document.form1.field_total1.value = editNumberSeparated(total1); // 合計を表示 var tax2 = Math.round((total1 * tax) / 100); document.form1.field_tax.value = editNumberSeparated(tax2); // 消費税を表示 document.form1.field_total2.value = editNumberSeparated(total1 + tax2); // 税込合計を表示
- 締切済み
- JavaScript
- 自動計算をIEとFireFoxで動かすには？
いつもお世話になっています。 フォームに入力した値を10で割った数を答えを自動で計算して、別フォームに出力する部分で、FireFoxでは自動計算されるのですがIEでは計算が行われませんでしたｘ＿ｘ； 【ソース】******************************* <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.value / 10; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 合計を計算 var total = price1; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } *********************************** 解決方法をご教授頂けたら幸いです。 何卒よろしくお願い致します。
- ベストアンサー
- JavaScript
- JavaＳの追加計算
function keisan(){ // 設定開始 var price1 = document.form1.kazu.value; // 合計を計算 if (price1 < 10000) { var total = parseInt(price1)*44/10000; } else { var total = parseInt(price1)*45/10000; } else if // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </SCRIPT> 上記に追加で*22/10000の計算を入れたいのですがどうしたらいいのですようか？ 初心者なので申し訳ございませんがご教授お願い致します。
- 締切済み
- JavaScript
- 自動計算について教えてください
http://www.tagindex.com/javascript/form/comp1b.html に自動計算フォームがあります。ソースは以下です。 やりたいのは、商品サンプル３の行の変更です。 この行だけ、商品名と単価の欄はそのままで、数量欄のプルダウンメニューをなくして空欄にして、金額欄に常に 500 が表示され、合計に加算されるようにしたいのです。（商品サンプル３を送料に変更したいのです。送料は注文数によって変更されず、常に500円という設定です） 色々やってみたのですが、どうやってもできません。・・ どなたかアドバイスお願いいたします！ <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- ジャバスクリプトで作った自動計算フォームが
ジャバスクリプトで作った自動計算フォームが 動かなくて困り果ております。 初心者です。御指南のほど、どうぞ宜しくお願いします。 ■ 編集ソース <html> <head> <title>テスト</title> <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 2900; document.form1.goods1.options[document.form1.goods1.selectedIndex].value; document.form1.field1.value = price1; // 小計を表示 // 合計を計算 var total = price1 // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>コース名</th> <th>単価</th> <th>数量</th> <th>縁</th> <th>金額</th> </tr> <tr> <td>激安コースA</td> <td align="right">2,900円</td> <td><select name="goods1" 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> <td><select name="goods1" onchange="keisan()"> <option value="0">額タイプを選択してください</option> <option value="500">タイプ1（500円）</option> <option value="1000">タイプ2（1,000円）</option> <option value="1500">タイプ3（1,500円）</option> </select></td> <td><input type="text" name="field1" size="8" value="0" /> 円</td> </tr> <tr> <td align="right" colspan="4"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- 自動計算java scriptについてご質問
http://www.tagindex.com/javascript/form/comp1b.html に自動計算フォームがあります。ソースは以下です。 やりたいのは、商品サンプル３の行の変更です。 この行だけ、商品名と単価の欄はそのままで、数量欄のプルダウンメニューをなくして空欄にして、金額欄に常に 500 が表示され、合計に加算されるようにしたいのです。（商品サンプル３を送料に変更したいのです。送料は注文数によって変更されず、常に500円という設定です） 色々やってみたのですが、どうやってもできません。・・ どなたかアドバイスお願いいたします！ <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form>
- 締切済み
- JavaScript
- リストから計算するJavaScript
質問させて下さい。料金を計算するスクリプトを組みたいのですが 良くある単価×個数という形ではなく、リストＡＡＡの中のａａａは500円、 ｂｂｂは5000円、リストＢＢＢの中のｃｃｃは10000円、ｄｄｄは15000円といった感じで 各リストの合計と総合計が出る形にしたいのです。 function totalPrice(){ var numCode01 = document.inputForm.code01.selectedIndex; var priceCode01 = 1 * numCode01; document.inputForm.code01_price.value = priceCode01; var numCode02 = document.inputForm.code02.selectedIndex; var priceCode02 = 1 * numCode02; document.inputForm.code02_price.value = priceCode02; var numCode03 = document.inputForm.code03.selectedIndex; var priceCode03 = 1 * numCode03; document.inputForm.code03_price.value = priceCode03; var total = priceCode01 + priceCode02 + priceCode03; document.inputForm.total_price.value = total; } と組んで <select name="code01" onChange="totalPrice();"> <option value="500">aaa</option> <option value="5000">bbb</option> </select> としてみたのですが、うまくいきません。基本的な知識が無いまま組んでしまったので どこが悪いのかも分かりません。どうかご助言お願いします。
- 締切済み
- JavaScript
お礼
お忙しい中ご指導ありがとうございます！ 何度もお手数おかけします。 やはり勉強不足なのか、なかなかうまくいきませんが、 ちょっとずつ思い通りに動くようになってきてます！ これを参考に地道に作っていきたいと思います。 完成はまだまだ先になりそうですので、先に質問を締め切ります。 本当に、ありがとうございました。