javascriptで合計金額を算出したいです。(1/2)

質問・疑問に答えるQ&AサイトOKWave
質問する

解決済みの質問

<< 前の質問 | 次の質問 >>

javascriptで合計金額を算出したいです。

はじめまして。javascriptに関しまして、初心者ですので是非教えていただけたら幸いです。
ショッピング用のwebサイトを作成していまして、formを商品名も個数もプルダウンで作成した場合、＜選択した商品＞×＜個数＞の合計金額の算出は可能でしょうか？また合計金額が3万円以上なら送料無料、3万円未満なら送料一律600円という機能も加えたいのですが・・・
ちなみに消費税の計算は大丈夫です。
どなたかわかる方がいましたら、教えていただけると本当に助かります。どうかよろしくお願い致します。

投稿日時 - 2009-11-01 04:23:48

連想キーワード：
通報する

QNo.5412868

mizunoke88

困ってます

質問者が選んだベストアンサー

ちょっとしゅうせい。
それにしても、いつもながら、だめだなぁ～。
<!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">&nbsp;</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>

投稿日時 - 2009-11-03 13:07:27

お礼

IEでなければ、本当に求めていたものです！
本当にお時間頂いてありがとうございます！！

投稿日時 - 2009-11-04 19:56:00

回答を評価する （1）
通報する

ANo.7

babu_baboo

はい

2人が「このQ&Aが役に立った」と投票しています

[  前へ  |  ]

ベストアンサー以外の回答（8件中　1～5件目)

ANo.9

babu_baboo

かんちがいしているとおもわないけど
＃７の
　　　　/*@
　　　　target.add( new Option() );
　　　　target.length--;
　　　　@*/
を
/*@
target.options[ target.length ] = new Option();
setTimeout((function(_){return function(){_.options[_.length-1]=null}})(target),100);
@*/
にかえると、IEでもなんとかうごきます。

投稿日時 - 2009-11-05 17:29:11

お礼

本当にご丁寧にありがとうございます。
IEでも大丈夫でした！
なんとか組み込むこともできました。
このたびは、本当にありがとうございました。

投稿日時 - 2009-11-07 23:50:10

回答を評価する （1）
通報する

ANo.8

babu_baboo

ちょっと、だめ２なこーどで、おちこんできた。
selectのopthionを、かくれselectとに、いききしているのだけど、
がめんのかきかえが、IEだとおもったようにならなかった。
くにくのさくとして、なにもないoptionを、ついかして、すぐに
さくじょしようとしたら、ついかしたものがにんしきされるまで
じかんがかかるようで、すぐにさくじょできない！
なので、さらにくにくのさくとして、じかんをおいてさくじょ。
まじ、だめなみほん。もうしわけない。

/*@
target.options[ target.length ] = new Option();
setTimeout((function(_){return function(){_.options[_.length-1]=null}})(target),100);
@*/

投稿日時 - 2009-11-03 21:17:01

お礼

返事が遅れてしまって申し訳ございません。
いままでいただいた意見を参考に、がんばってみます。
本当に１から１０までありがとうございます！

投稿日時 - 2009-11-04 19:51:57

回答を評価する （1）
通報する

ANo.6

babu_baboo

ごめんIEだと。ぜんぜんだめだぁ～。

投稿日時 - 2009-11-03 12:41:00

お礼する
回答を評価する （0）
通報する

ANo.5

babu_baboo

こんなのはどう？
でも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">&nbsp;</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>

投稿日時 - 2009-11-03 09:53:49

お礼する
回答を評価する （1）
通報する

ANo.4

babu_baboo

しょしんしゃだからって、えんりょすることないじょ！
なっとくするまで、きけばよいよ。

＞要するに商品名A＝３５００円、商品名B＝４０００円という宣言がないと
せんげん、というか、しょうひんめいのたんかりすとがないと・・

<select～>
　<option value="1000">腕時計
　<option value="5000">腹時計

みたいにして、しょうひんをえらぶと、たんかを知るすべが
あるのだけど、どうする？

商品が５０個あると、その商品名に応じた単価をどこから
もってくるかだよ。
とりあえず、きぼうは？

投稿日時 - 2009-11-02 18:08:28

補足

気を使っていただいて本当にありがとうございます！！
というか、こんなに付き合っていただいて申し訳ないです。
是非
<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">茶碗２０
と、気合いで上記のようにすべて記述すれば、
商品を選択したときに単価を知れるのですか？
この記述により、プルダウンで商品名を選択した
ときにその商品の値段のデータを持ってきて、
前の回答で記述して頂いたプログラムで掛け算を
実行できるということですか？

本当に厚かましいですが是非これでできるなら、
そのプログラムを教えてほしいです。

投稿日時 - 2009-11-03 03:19:59

お礼する
回答を評価する （1）
通報する
あわせてチェックしたい
  • 送料一律について ...
  • 一律送料はいいの？ ...
  • JavaScript　Form　OPTION value ...
PR

ページTOP

【回答募集中】花粉にひと言、物申す！[ 詳細 ]

カテゴリ

[ 一覧 ]

OKWaveのオススメ

教えて弁護士さん！

教えて弁護士さん！

お金の悩みQ&A特集はこちら

おすすめリンク