• 締切済み

自動計算表示について

http://www.tagindex.com/javascript/form/comp1b.html を参考に自動計算表示させるものを作っています。 当然ながらソースをそのまま実行すれば動作するのですが単価を設定しセレクトボックスの 選択項目の2番目を選択すると2倍、3番目を選択すると3倍と単純計算でしか増えず困っております。 例えばセレクトボックスの選択項目が5個あるとしそれぞれに任意の料金を指定し合計金額を求める場合 どのようにすればいいのでしょうか？

noname#65793
noname#65793

みんなの回答

noname#84373
noname#84373
回答No.3

<html> <head><style>input{text-align:right}</style> Enterキーでフォーカスが移動する余計な機能付！<br/> <table border="1" id="h"> <tr><th>商品</th><th>単価</th><th>個数</th><th>小計</th></tr> <tr><td>a</td><td><input type="text" id="a1"></td><td><input type="text" id="b1"></td><td></td></tr> <tr><td>b</td><td><input type="text" id="a2"></td><td><input type="text" id="b2"></td><td></td></tr> <tr><td>c</td><td><input type="text" id="a3"></td><td><input type="text" id="b3"></td><td></td></tr> <tr><td>c</td><td><input type="text" id="a4"></td><td><input type="text" id="b4"></td><td></td></tr> <tr><td>c</td><td><input type="text" id="a5"></td><td><input type="text" id="b5"></td><td></td></tr> <tr><td></td><td></td><td>合計</td><td></td></tr> <script> window.onload = function() { obj = document.getElementsByTagName( 'input' ); for( var i=0; i<obj.length; i++){ if(i==0) obj[i].focus(); if(obj[i].type=='text' || obj[i].type=='textarea') { obj[i].onkeydown = function(){if(event.keyCode == 13) event.keyCode = 9;}; obj[i].onchange = calc; } } } var tn = 5; function calc(){ tb = $('h');g =0; for(i=1;i<=tn;i++){ g+= s =$('a'+i).value * $('b'+i).value; tb.rows[i].cells[3].innerHTML=s; } tb.rows[(tn+1)].cells[3].innerHTML=g; } function $(o){ return document.getElementById(o); } </script> </html>

全文を見る
すると、全ての回答が全文表示されます。
  • arexis
  • ベストアンサー率66% (66/99)
回答No.2

そこのサンプルをベースに書きます。 HTMLの方はSelectのオプションにvalueをつけて金額を入れます。 <option value="">選択してください</option> <option value="100">選択項目１</option> <option value="150">選択項目２</option> <option value="200">選択項目３</option> <option value="1000">選択項目４</option> <option value="3000">選択項目５</option> 関数の方は function keisan(){ // 設定開始 // セレクト1 var price1 = document.form1.goods1.value * 1; // document.form1.field1.value = price1; // // セレクト2 var price2 = document.form1.goods2.value * 1; // document.form1.field2.value = price2; // // セレクト3 var price3 = document.form1.goods3.value * 1; // document.form1.field3.value = price3; // // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 }

全文を見る
すると、全ての回答が全文表示されます。
  • auty
  • ベストアンサー率58% (284/486)
回答No.1

＞＞＞　単純計算でしか増えず困っております。 の言うところがよく分かりませんが、注意するところを述べてみます。 ・　値段に関して変更するところは、１商品につき2箇所で、かつこれ以上変更する必要はありません。たとえば、商品サンプル1 の場合、 　　　1.　var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 　　　2.　500円 の２箇所だけです。 ・　特に合計を出す 　　　 var total = price1 + price2 + price3; を変更してはいけません。ここを扱うのは、商品の数が変わるときです。 これで最初のソースコードからやり直してみてください。 今気がつきましたが、 ＞＞＞　セレクトボックスの選択項目が5個 というのは、「５個のセレクトボックス」ということでしょうか。つまりサンプルより 「２個のセレクトボックス」が増える。これはまさに、上の「特に合計を出す」にあたります。 この場合なら、同様にprice4 、 price5を準備して、 　　　 var total = price1 + price2 + price3 + price4 + price5; という具合です。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptによる自動計算フォーム

    サンプルを読んだりは多少わかる範囲なのですが、カスタムの段階で詰まってしまいましたのでお知恵お貸し頂ければと思います。 積算の自動計算フォームを作成しようとしてるのですが、サンプルでよくあるものが固定数値×プルダウン＝小計のようなものが多く、この固定数を入力フォーム、プルダウンも入力フォームに切り替えたいのですが、変更すると合計欄がNaNと表示されてしまいます。 何か指定が間違っているのでしょうか。 こちらのサイトを参考に作っています。 http://www.tagindex.com/javascript/form/comp1b.html 宜しくお願いします。

  • javascriptを使った自動計算→送信

    https://sv62.xserver.jp/~healing-rose/healing-rose.com/form_test/order_form.php こちらのサイトのような感じの注文フォームを作成したいと思っています。 そこで、上記のサイトで言う、「品種選択　×　本数」の自動計算の部分をjavascriptで作成しました。 そして自動計算した金額と、商品名・個数を反映させた注文フォームを PHPで作りたいと思っています。 PHPの知識は、人が作ったものをカスタマイズする程度しかないのですが、 いつも通りフォームを作ったら自動計算された部分が送信確認の画面で表示されなくなってしまいました。 自動計算の部分は http://www.tagindex.com/javascript/form/comp1a.html このサイトに書いてある通りにしているのですが、 例えば <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> この部分の「select name="goods2"」をそのまま<?php echo($str_goods2); ?>としても反映されないんです…（当たり前ですか？） そこで聞きたいのですが、javascriptで自動計算したあとに、参考サイトのような感じで 注文フォーム→送信ということは可能なのでしょうか？ PHPで自動計算…等検索してみたのですが、自動計算になるとjavascriptしか出てきません。 参考サイトの注文フォームと同じようなものの作り方を教えてください。

  • JavaScriptで自動計算

    JavaScriptを使って自動計算ができる方法を知りたく質問させていただきます。 計算タイプA・B・C・Dをセレクトボックスから選択 ２～１８をセレクトボックスで選択 　　　　　　　　↓ 計算と書かれたボタンを押すことで計算 計算方法はセレクトボックスで 選択する数字を『ｎ』とします。 『A』を選択した場合、 ｎ（ｎ－１） 『B』を選択した場合、 n（n－１）÷２ 『C』を選択した場合、 n(n－１)(n－２) 『D』『５』を選択した場合、 n(n－１)(n－２)÷２ 以上のようなものを作るにはどうしたら良いのでしょうか？

  • 計算された値をselectboxにselectedしたい

    セレクトボックスAとセレクトボックスBの選択された値を加算し、その値をセレクトボックスCにselectedしたいです。 計算はできているので後は、セレクトボックスCにselectedするだけですが、その方法がわかりません。 言語はJavascriptとHTMLです。 ご回答お願いします。 現状のソースコードは以下のとおりです。 なお、セレクトボックスAとセレクトボックスBの<option>タグの中身は省略(0～23までの数値)します。 <ソースコード> <html> <head> <script type="text/javascript"> function schedule_end_time(){ var val1=parseInt(document.form1.schedule_start_jikan.value,10); var val2=parseInt(document.form1.work_jikan.value,10); var val3=val1+val2; </script> </head> <body> <form method="GET"> <td><select name="schedule_start_jikan" onchange="schedule_end_time()"></select></td> セレクトボックスA <td><select name="work_jikan" onchange="schedule_end_time()"></select></td> セレクトボックスB <td><select name="schedule_end_jikan"><option value="ここをセレクトボックスAとセレクトボックスBの合計にしたい" selected>××</option> </form> </body> </html>

  • 自動計算について教えてください

    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>

  • 自動計算を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; // 合計を表示 } *********************************** 解決方法をご教授頂けたら幸いです。 何卒よろしくお願い致します。

  • カートに連動したメールフォームの作り方を教えて下さい。

    数百の商品欄の中から、選んだ商品の金額と商品名を自動的にメールで送るシステムが作りたいです。 カートと書きましたが、↓上のアドレスの数の部分をボタンに変えて、タイプＡＢ混合型にしたいと思います。 タイプＡ　http://www.tagindex.com/javascript/form/comp1b.html​ タイプＢ　http://www.tagindex.com/javascript/form/comp2b.html メールに選択した商品名を自動的に書きたいのですが、良い方法はありませんか？よろしくお願いします。

    • 締切済み
    • PHP
  • JavaScriptで計算表

    下記のような計算式を作りたいのですが、ご教授願えませんでしょうか。 AA項目　　セレクトボックスで、あ～おから選択（１） 　　　　　セレクトボックスで、あ～おから選択（２） 　　　　　セレクトボックスで、あ～おから選択（３） 　　　　　セレクトボックスで、あ～おから選択（４） 　　　　　セレクトボックスで、あ～おから選択（５） 　※　あ＝40、い＝30、う＝20、え＝10、お＝5　とする BB項目　　ユーザ入力（１） 　　　　　ユーザ入力（２） 　　　　　ユーザ入力（３） 　　　　　ユーザ入力（４） 　　　　　ユーザ入力（５） CC項目　　AA項目とBB入力を掛けた計算結果表示（１） 　　　　　AA項目とBB入力を掛けた計算結果表示（２） 　　　　　AA項目とBB入力を掛けた計算結果表示（３） 　　　　　AA項目とBB入力を掛けた計算結果表示（４） 　　　　　AA項目とBB入力を掛けた計算結果表示（５） DD項目　　2割～8割からセレクトボックスで選択（１） 　　　　　2割～8割からセレクトボックスで選択（２） 　　　　　2割～8割からセレクトボックスで選択（３） 　　　　　2割～8割からセレクトボックスで選択（４） 　　　　　2割～8割からセレクトボックスで選択（５） EE項目　　セレクトボックスで、か～こから選択 ★ CC項目とDD項目を掛けた数字をすべて足した数字表示　「FF」 　　（例：CC項目（１）＝DD項目（１）、CC項目（２）＝DD項目（２）という考え方） 　 ★ CC項目とDD項目ごとに掛けた数字にEE項目で選択した数字を掛けて足した数字表示　「GG」 　　　「計算ボタン」　　　　「クリアボタン」 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ １．AA項目、BB項目は、必ずしも全部を選択しない（CC項目、DD項目も連動） ２．各項目も（１）と（１）で計算 　（例） 　　　AA項目（１）とBB項目（１）の計算結果がCC項目（１）に表示 　　　CC項目（１）とDD項目（１）を計算 ３．EE項目は、AA項目の選択の種類によって、掛ける数字が変わってくる。 　　　AA項目　あ　　EE項目　か　＝　20.2 　　　AA項目　い　　EE項目　か　＝　15.8 　　　AA項目　う　　EE項目　か　＝　13.7 　　　AA項目　え　　EE項目　か　＝　10.5 　　　AA項目　お　　EE項目　か　＝　8.2 　　　AA項目　あ　　EE項目　き　＝　31.6 　　　AA項目　い　　EE項目　き　＝　28.1 　　　AA項目　う　　EE項目　き　＝　22.4 　　　AA項目　え　　EE項目　き　＝　17.2 　　　AA項目　お　　EE項目　き　＝　14.7 ４．GG項目は、CC項目とDD項目ごとに計算した数字に、３．で選択した数字を掛けて足した合計を表示 　　（例） 　　　　CC項目（１）とDD項目（１）を掛けた数字に、AA項目で「あ」を選択し、EE項目は「か」を選択 ５．計算ボタンをクリックすると、「FF」と「GG」を計算する ６．クリアボタンをクリックすると、すべてクリアとする 　　　　 ＊＊＊＊＊＊＊＊＊＊＊＊ 仮に AA項目　「あ～う」までを選択 BB項目　（AA項目「あ」＝15、AA項目「い」＝8、AA項目「う」＝3） DD項目　（AA項目「あ」＝2割、AA項目「い」＝4割、AA項目「う」＝7割） EE項目　「か」を選択 分かりづらい説明で申し訳ございませんが、宜しくお願いいたします。

  • 自動計算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>

  • 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>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する