- ベストアンサー
javascriptで合計金額を算出したいです。
はじめまして。javascriptに関しまして、初心者ですので是非教えていただけたら幸いです。 ショッピング用のwebサイトを作成していまして、formを商品名も個数もプルダウンで作成した場合、＜選択した商品＞×＜個数＞の合計金額の算出は可能でしょうか？また合計金額が3万円以上なら送料無料、3万円未満なら送料一律600円という機能も加えたいのですが・・・ ちなみに消費税の計算は大丈夫です。 どなたかわかる方がいましたら、教えていただけると本当に助かります。どうかよろしくお願い致します。
- mizunoke88
- お礼率63% (23/36)
- JavaScript
- 回答数9
- ありがとう数7
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
ちょっとしゅうせい。 それにしても、いつもながら、だめだなぁ～。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="application/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> <style type="text/css"> td input { text-align : right; border: 0px none; } tfoot td { text-align : right; } td select { width:15em; } td em { font-style: normal; color: green; font-size:80%; } </style> </head> <body> <form action="#" action="#" name="tyuumon"> <table border="1"> <thead> <tr> <th>部門</th> <th>商品名</th> <th>単価</th> <th>個数</th> <th>小計</th> </tr> </thead> <tbody id="copymoto"> <tr id="copymoto2"> <td> <select name="bumon"> <option value="none" selected>選択してちょ</option> <option value="bunrui01">分類１</option> <option value="bunrui02">分類２</option> <option value="bunrui03">分類３</option> <option value="bunrui04">分類４</option> </select> </td> <td> <select name="shouhin"> <optgroup label="none"> <option value="0" selected>最初に分類を選択して</option> </optgroup> <optgroup label="bunrui01"> <option value="0" selected>商品を選択して</option> <option value="1000">01置時計</option> <option value="2000">01腹時計</option> </optgroup> <optgroup label="bunrui02"> <option value="0" selected>商品を選択して</option> <option value="3000">02置時計</option> <option value="4000">02腹時計</option> </optgroup> <optgroup label="bunrui03"> <option value="0" selected>商品を選択して</option> <option value="5000">03置時計</option> <option value="6000">03腹時計</option> </optgroup> <optgroup label="bunrui04"> <option value="0" selected>商品を選択して</option> <option value="7000">04時計</option> <option value="8000">04腹時計</option> </optgroup> </select> </td> <td> <input type="text" value="0" name="tanka" size="10"> </td> <td> <input type="text" value="0" name="kosu" size="8"> </td> <td> <input type="text" value="0" name="shokei" size="12"> </td> </tr> </tbody> <tfoot> <tr> <td colspan="4">送料<em id="untin"> </em></td> <td><input type="text" value="0" name="souryo" size="8"></td> </tr> <tr> <td colspan="4">合計</td> <td><input type="text" value="0" name="gokei" size="8"></td> </tr> </tfoot> </table> </form> <script type="text/javascript"><!-- //@cc_on var SelectGroup = function ( target ) { var buffer = document.createElement( 'SELECT' ); return function ( v ) { var obj, cnt; while( obj = target.firstChild ) { 1 == obj.nodeType ? buffer.appendChild( obj ): target.removeChild( obj ); } for( cnt = 0; obj = buffer.childNodes[ cnt++ ]; ) if( 'OPTGROUP' === obj.nodeName && obj.label == v ) { target.appendChild( obj ); /*@ target.add( new Option() ); target.length--; @*/ break; } } }; var calc = function ( ) { var total = 0; var form = document.forms[ 'tyuumon' ]; var tanka = form.elements[ 'tanka' ]; var kosu = form.elements[ 'kosu' ]; var shokei = form.elements[ 'shokei' ]; var n = tanka.length; var tmp; while( n-- ) { tmp = parseFloat( tanka[ n ].value ) * parseFloat( kosu[ n ].value ); if(! isNaN( tmp ) ) { shokei[ n ].value = tmp; total += tmp; } } if( 30000 <= total ) { document.getElementById('untin').firstChild.nodeValue = '(無料)'; form.elements['souryo'].value = 0; } else { document.getElementById('untin').firstChild.nodeValue = '(*)'; form.elements['souryo'].value = 600; total += 600; } form.elements['gokei'].value = total; } var n = 4; var saki = document.getElementById( 'copymoto' ); while( n--) saki.appendChild( document.getElementById( 'copymoto2' ).cloneNode( true ) ); var form = document.forms[ 'tyuumon' ]; var bumon = form.elements[ 'bumon' ]; var shouhin = form.elements[ 'shouhin' ]; var tanka = form.elements[ 'tanka' ]; var kosu = form.elements[ 'kosu' ]; var func; n = bumon.length; while( n-- ) { func = SelectGroup( shouhin[ n ] ); bumon[n]./*@if(@_jscript) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'change', (function(_, e){return function (){_(e.value); };})(func, bumon[n]), false); shouhin[n]./*@if(@_jscript) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'change', (function(e, e2, e3){ return function (){ e2.value = e.value; if( e3.value=='' || e3.value=="0" ) e3.value = 1; calc(); };})(shouhin[n], tanka[n], kosu[n]), false); kosu[n]./*@if(@_jscript) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'change', calc, false); func('none'); } //--> </script> </body> </html>
その他の回答 (8)
- babu_baboo
- ベストアンサー率51% (268/525)
かんちがいしているとおもわないけど ＃７の /*@ target.add( new Option() ); target.length--; @*/ を /*@ target.options[ target.length ] = new Option(); setTimeout((function(_){return function(){_.options[_.length-1]=null}})(target),100); @*/ にかえると、IEでもなんとかうごきます。
お礼
本当にご丁寧にありがとうございます。 IEでも大丈夫でした！ なんとか組み込むこともできました。 このたびは、本当にありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
ちょっと、だめ２なこーどで、おちこんできた。 selectのopthionを、かくれselectとに、いききしているのだけど、 がめんのかきかえが、IEだとおもったようにならなかった。 くにくのさくとして、なにもないoptionを、ついかして、すぐに さくじょしようとしたら、ついかしたものがにんしきされるまで じかんがかかるようで、すぐにさくじょできない！ なので、さらにくにくのさくとして、じかんをおいてさくじょ。 まじ、だめなみほん。もうしわけない。 /*@ target.options[ target.length ] = new Option(); setTimeout((function(_){return function(){_.options[_.length-1]=null}})(target),100); @*/
お礼
返事が遅れてしまって申し訳ございません。 いままでいただいた意見を参考に、がんばってみます。 本当に１から１０までありがとうございます！
- babu_baboo
- ベストアンサー率51% (268/525)
ごめんIEだと。ぜんぜんだめだぁ～。
- babu_baboo
- ベストアンサー率51% (268/525)
こんなのはどう？ でもIE6だと、selectのきょどうがへん！ここまでかいてからきづいた。 ぜんかくくうはくは、すべてはんかくに。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="application/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> <style type="text/css"> td input { text-align : right; border: 0px none; } tfoot td { text-align : right; } td select { width:15em; } td em { font-style: normal; color: green; font-size:80%; } </style> </head> <body> <form action="#" action="#" name="tyuumon"> <table border="1"> <thead> <tr> <th>部門</th> <th>商品名</th> <th>単価</th> <th>個数</th> <th>小計</th> </tr> </thead> <tbody id="copymoto"> <tr id="copymoto2"> <td> <select name="bumon"> <option value="none" selected>選択してちょ</option> <option value="bunrui01">分類１</option> <option value="bunrui02">分類２</option> <option value="bunrui03">分類３</option> <option value="bunrui04">分類４</option> </select> </td> <td> <select name="shouhin"> <optgroup label="none"> <option value="0" selected>最初に分類を選択して</option> </optgroup> <optgroup label="bunrui01"> <option value="0" selected>商品を選択して</option> <option value="1000">01置時計</option> <option value="2000">01腹時計</option> </optgroup> <optgroup label="bunrui02"> <option value="0" selected>商品を選択して</option> <option value="3000">02置時計</option> <option value="4000">02腹時計</option> </optgroup> <optgroup label="bunrui03"> <option value="0" selected>商品を選択して</option> <option value="5000">03置時計</option> <option value="6000">03腹時計</option> </optgroup> <optgroup label="bunrui04"> <option value="0" selected>商品を選択して</option> <option value="7000">04時計</option> <option value="8000">04腹時計</option> </optgroup> </select> </td> <td> <input type="text" value="0" name="tanka" size="10"> </td> <td> <input type="text" value="0" name="kosu" size="8"> </td> <td> <input type="text" value="0" name="shokei" size="12"> </td> </tr> </tbody> <tfoot> <tr> <td colspan="4">送料<em id="untin"> </em></td> <td><input type="text" value="0" name="souryo" size="8"></td> </tr> <tr> <td colspan="4">合計</td> <td><input type="text" value="0" name="gokei" size="8"></td> </tr> </tfoot> </table> </form> <script type="text/javascript"><!-- //@cc_on var SelectGroup = function ( target ) { var buffer = document.createElement( 'SELECT' ); return function ( v ) { var obj, cnt; while( obj = target.firstChild ) buffer.appendChild( obj ); for( cnt = 0; obj = buffer.childNodes[ cnt++ ]; ) if( 'OPTGROUP' === obj.nodeName && obj.label == v ) { target.appendChild( obj ); break; } } }; var calc = function ( ) { var total = 0; var form = document.forms[ 'tyuumon' ]; var tanka = form.elements[ 'tanka' ]; var kosu = form.elements[ 'kosu' ]; var shokei = form.elements[ 'shokei' ]; var n = tanka.length; var tmp; while( n-- ) { tmp = parseFloat( tanka[ n ].value ) * parseFloat( kosu[ n ].value ); if(! isNaN( tmp ) ) { shokei[ n ].value = tmp; total += tmp; } } if( 30000 <= total ) { document.getElementById('untin').firstChild.nodeValue = '(無料)'; form.elements['souryo'].value = 0; } else { document.getElementById('untin').firstChild.nodeValue = '(*)'; form.elements['souryo'].value = 600; total += 600; } form.elements['gokei'].value = total; } var n = 4; var saki = document.getElementById( 'copymoto' ); while( n--) saki.appendChild( document.getElementById( 'copymoto2' ).cloneNode( true ) ); var form = document.forms[ 'tyuumon' ]; var bumon = form.elements[ 'bumon' ]; var shouhin = form.elements[ 'shouhin' ]; var tanka = form.elements[ 'tanka' ]; var kosu = form.elements[ 'kosu' ]; var func; n = bumon.length; while( n-- ) { func = SelectGroup( shouhin[ n ] ); bumon[n]./*@if(@_jscript) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'change', (function(_, e){return function (){_(e.value); };})(func, bumon[n]), false); shouhin[n]./*@if(@_jscript) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'change', (function(e, e2, e3){ return function (){ e2.value = e.value; if( e3.value=='' || e3.value=="0" ) e3.value = 1; calc(); };})(shouhin[n], tanka[n], kosu[n]), false); kosu[n]./*@if(@_jscript) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'change', calc, false); func('none'); } //--> </script> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
しょしんしゃだからって、えんりょすることないじょ！ なっとくするまで、きけばよいよ。 ＞要するに商品名A＝３５００円、商品名B＝４０００円という宣言がないと せんげん、というか、しょうひんめいのたんかりすとがないと・・ <select～> <option value="1000">腕時計 <option value="5000">腹時計 みたいにして、しょうひんをえらぶと、たんかを知るすべが あるのだけど、どうする？ 商品が５０個あると、その商品名に応じた単価をどこから もってくるかだよ。 とりあえず、きぼうは？
補足
気を使っていただいて本当にありがとうございます！！ というか、こんなに付き合っていただいて申し訳ないです。 是非 <select～> <option value="1000">腕時計 <option value="5000">腹時計 で計算可能になるのでしたら、教えて頂きたいです。 一応今の状況を書いてまとめてみました。 今、a.htmlに商品が9個あり、すべて３５００円、 商品名は仮に置時計１、置時計２・・・、置時計９ です。b.htmlに商品が２０個あり、すべて３０００円、 商品名は仮に茶碗１、茶碗２、・・・、茶碗２０です。 まだ大分先ですが、今後c.htmlで商品20個、d.htmlで 商品30個と増えていく予定です。 商品名 個数 合計 置時計４(shinaban1) × 10個(kosu1) ＝ ３５０００円 茶碗１(shinaban2) × 3個(kosu2) ＝ ９０００円 茶碗２(shinaban3) × 5個(kosu3) ＝ １５０００円 茶碗１０(shinaban4) × 1個(kosu4) ＝ ３０００円 送料0円 合計５３０００円 送信 というものが作りたいです。 <select～> <option value="3500">置時計１ <option value="3500">置時計２ ・ ・ ・ <option value="3500">置時計１０ <option value="3000">茶碗１ ・ ・ ・ <option value="3000">茶碗２０ と、気合いで上記のようにすべて記述すれば、 商品を選択したときに単価を知れるのですか？ この記述により、プルダウンで商品名を選択した ときにその商品の値段のデータを持ってきて、 前の回答で記述して頂いたプログラムで掛け算を 実行できるということですか？ 本当に厚かましいですが是非これでできるなら、 そのプログラムを教えてほしいです。
- babu_baboo
- ベストアンサー率51% (268/525)
さんこうになるのか、びみょうだけど。 ぜんかくくうはくは、はんかくに。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="application/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> <style type="text/css"> </style> </head> <body> <form name="kounyu" method="post" action="#"> <p><input type="text" name="tanka">×<input type="text" name="kosu">＝<input type="text" name="kei"></p> <p><input type="text" name="tanka">×<input type="text" name="kosu">＝<input type="text" name="kei"></p> <p><input type="text" name="tanka">×<input type="text" name="kosu">＝<input type="text" name="kei"></p> <p> <input type="button" value="計算" name="aa" onclick="calc()"> <input type="text" name="goukei" value=""> </form> <script type="text/javascript"><!-- function calc() { var total = 0; var form = document.forms['kounyu']; var tanka = form.elements['tanka']; var kosu = form.elements['kosu']; var kei = form.elements['kei']; var n = tanka.length; var tmp; while( n-- ) { tmp = parseFloat( tanka[ n ].value ) * parseFloat( kosu[ n ].value ); if(! isNaN( tmp ) ) { kei[ n ].value = tmp; total += tmp; } } document.forms['kounyu'].elements['goukei'].value = total; } //--> </script> </body> </html>
お礼
１から作って頂き、ご丁寧にありがとうございます。 参考にしてみます。
- babu_baboo
- ベストアンサー率51% (268/525)
shinaban1～4までの、料金は、どこからもってくるの？ 商品名を検索して、それに該当する商品の価格の参照の仕方がわからない！ あっ！漢字になってしまった。
補足
shinaban1～4までの料金はどこからもってくるの？ ＞本当に素人で、よくわかりません。申し訳ないです。 要するに商品名A＝３５００円、商品名B＝４０００円という宣言がないと、たとえばshinaban1でプルダウンメニューから商品Aを選択し、kosu1で２個と選択しても7000円と、計算できないということですか？質問内容が素人っぽくてわかりにくいと思いますがご回答いただけると助かります。
- babu_baboo
- ベストアンサー率51% (268/525)
どにち、しゅくじつは、かいとうしゃも、やすむけいこうにあるよ！^^; なので、htmlぐらいあっぷすると、めいかいなかいとうがつくかも？ >合計金額の算出は可能でしょうか？ という、といには、「可能です」とだけ、こたえたくなります。 var v = document.forms['なまえ'].elements['なまえ'].value - 0; ですうちとしてしゅとく。 それらをかけあわせ if( total>=30000) souryo = 0; else souryo = 600;
お礼
投稿ありがとうございます。 初めての質問でして、まだここの機能もよく知らず、質問内容も不十分なものになってしまって申し訳ないです。 htmlをのせたほうがいいとご指摘がありましたので載せます。 解決策を教えていただけると嬉しいです。
補足
<body> <div id="container"> <div id="main_container"> <div id="left"> </div> <div id="right"> <img src="images/kounyu_right.png" id="kounyu_right"> <p class="text_right">商品情報を書ききれない場合は、一番下の空欄に記入して頂きますようお願い致します。また記入漏れや記入間違いのないように、十分確認してから「送る」をクリックして下さい。 </p> <form name="kounyu" method="post" action="mailto:***@gmail.com"> <table border="0" width="430" id="table_right"> <tr> <td width="140" align="center">ジャンル</td> <td width="220" align="center">品番又は商品名</td> <td width="70" align="center">個数</td> </tr> <tr> <td width="140"> <select name="janru1"> <option selected>内容を選択して下さい</option> <option value="ken_okidokei">KEN：置時計シリーズ </option> </select> </td> <td width="220"><input type="text" name="shinaban1" id="input2"> </td> <td width="70"><input type="text" name="kosu1" id="input3"> 個</td> </tr> <tr> <td width="140"> <select name="janru2"> <option selected>内容を選択して下さい</option> <option value="ken_okidokei">KEN：置時計シリーズ</option> </select> </td> <td width="220"><input type="text" name="shinaban2"id="input2"> </td> <td width="70"><input type="text" name="kosu2" id="input3"> 個</td> </tr> <tr> <td width="140"> <select name="janru3"> <option selected>内容を選択して下さい</option> <option value="ken_okidokei">KEN：置時計シリーズ</option> </select> </td> <td width="220"><input type="text" name="shinaban3" id="input2"> </td> <td width="70"><input type="text" name="kosu3" id="input3"> 個</td> </tr> <tr> <td width="140"> <select name="janru4"> <option selected>内容を選択して下さい</option> <option value="ken_okidokei">KEN：置時計シリーズ</option> </select> </td> <td width="220"><input type="text" name="shinaban4" id="input2"> </td> <td width="70"><input type="text" name="kosu4" id="input3"> 個</td> </tr> <tr> <td colspan="3" width="430"><textarea name="textarea2" id="textarea2"> ジャンルの縦軸（janru1,janru2,janru3,janru4）は消去するので無視して頂きたいです。 shinaban1,2,3,4ですべてプルダウンで商品を４０点の中から選択します。 kosu1,2,3,4で個数をプルダウンで１０個まで選択します。 shinaban1×kosu1＋ shinaban2×kosu2＋ shinaban3×kosu2＋ shinaban4×kosu4＝合計 という計算をしたいです。 web制作の素人で、質問内容がわかりにくくて申し訳ないですが、ご回答いただけると幸いです。
お礼
IEでなければ、本当に求めていたものです！ 本当にお時間頂いてありがとうございます！！