はじめまして。javascriptに関しまして、初心者ですので是非教えていただけたら幸いです。
ショッピング用のwebサイトを作成していまして、formを商品名も個数もプルダウンで作成した場合、<選択した商品>×<個数>の合計金額の算出は可能でしょうか?また合計金額が3万円以上なら送料無料、3万円未満なら送料一律600円という機能も加えたいのですが・・・
ちなみに消費税の計算は大丈夫です。
どなたかわかる方がいましたら、教えていただけると本当に助かります。どうかよろしくお願い致します。
No.1
- 回答日時:
どにち、しゅくじつは、かいとうしゃも、やすむけいこうにあるよ!^^;
なので、htmlぐらいあっぷすると、めいかいなかいとうがつくかも?
>合計金額の算出は可能でしょうか?
という、といには、「可能です」とだけ、こたえたくなります。
var v = document.forms['なまえ'].elements['なまえ'].value - 0;
ですうちとしてしゅとく。
それらをかけあわせ
if( total>=30000) souryo = 0; else souryo = 600;
この回答への補足
<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:mizunokeisuke0428@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ですべてプルダウンで商品を40点の中から選択します。
kosu1,2,3,4で個数をプルダウンで10個まで選択します。
shinaban1×kosu1+
shinaban2×kosu2+
shinaban3×kosu2+
shinaban4×kosu4=合計
という計算をしたいです。
web制作の素人で、質問内容がわかりにくくて申し訳ないですが、ご回答いただけると幸いです。
投稿ありがとうございます。
初めての質問でして、まだここの機能もよく知らず、質問内容も不十分なものになってしまって申し訳ないです。
htmlをのせたほうがいいとご指摘がありましたので載せます。
解決策を教えていただけると嬉しいです。
No.2
- 回答日時:
shinaban1~4までの、料金は、どこからもってくるの?
商品名を検索して、それに該当する商品の価格の参照の仕方がわからない!
あっ!漢字になってしまった。
この回答への補足
shinaban1~4までの料金はどこからもってくるの?
>本当に素人で、よくわかりません。申し訳ないです。
要するに商品名A=3500円、商品名B=4000円という宣言がないと、たとえばshinaban1でプルダウンメニューから商品Aを選択し、kosu1で2個と選択しても7000円と、計算できないということですか?質問内容が素人っぽくてわかりにくいと思いますがご回答いただけると助かります。
No.3
- 回答日時:
さんこうになるのか、びみょうだけど。
ぜんかくくうはくは、はんかくに。
<!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>
No.4
- 回答日時:
しょしんしゃだからって、えんりょすることないじょ!
なっとくするまで、きけばよいよ。
>要するに商品名A=3500円、商品名B=4000円という宣言がないと
せんげん、というか、しょうひんめいのたんかりすとがないと・・
<select~>
<option value="1000">腕時計
<option value="5000">腹時計
みたいにして、しょうひんをえらぶと、たんかを知るすべが
あるのだけど、どうする?
商品が50個あると、その商品名に応じた単価をどこから
もってくるかだよ。
とりあえず、きぼうは?
この回答への補足
気を使っていただいて本当にありがとうございます!!
というか、こんなに付き合っていただいて申し訳ないです。
是非
<select~>
<option value="1000">腕時計
<option value="5000">腹時計
で計算可能になるのでしたら、教えて頂きたいです。
一応今の状況を書いてまとめてみました。
今、a.htmlに商品が9個あり、すべて3500円、
商品名は仮に置時計1、置時計2・・・、置時計9
です。b.htmlに商品が20個あり、すべて3000円、
商品名は仮に茶碗1、茶碗2、・・・、茶碗20です。
まだ大分先ですが、今後c.htmlで商品20個、d.htmlで
商品30個と増えていく予定です。
商品名 個数 合計
置時計4(shinaban1) × 10個(kosu1) = 35000円
茶碗1(shinaban2) × 3個(kosu2) = 9000円
茶碗2(shinaban3) × 5個(kosu3) = 15000円
茶碗10(shinaban4) × 1個(kosu4) = 3000円
送料0円
合計53000円
送信
というものが作りたいです。
<select~>
<option value="3500">置時計1
<option value="3500">置時計2
・
・
・
<option value="3500">置時計10
<option value="3000">茶碗1
・
・
・
<option value="3000">茶碗20
と、気合いで上記のようにすべて記述すれば、
商品を選択したときに単価を知れるのですか?
この記述により、プルダウンで商品名を選択した
ときにその商品の値段のデータを持ってきて、
前の回答で記述して頂いたプログラムで掛け算を
実行できるということですか?
本当に厚かましいですが是非これでできるなら、
そのプログラムを教えてほしいです。
No.5
- 回答日時:
こんなのはどう?
でも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">分類1</option>
<option value="bunrui02">分類2</option>
<option value="bunrui03">分類3</option>
<option value="bunrui04">分類4</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>
No.7ベストアンサー
- 回答日時:
ちょっとしゅうせい。
それにしても、いつもながら、だめだなぁ~。
<!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">分類1</option>
<option value="bunrui02">分類2</option>
<option value="bunrui03">分類3</option>
<option value="bunrui04">分類4</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>
No.8
- 回答日時:
ちょっと、だめ2なこーどで、おちこんできた。
selectのopthionを、かくれselectとに、いききしているのだけど、
がめんのかきかえが、IEだとおもったようにならなかった。
くにくのさくとして、なにもないoptionを、ついかして、すぐに
さくじょしようとしたら、ついかしたものがにんしきされるまで
じかんがかかるようで、すぐにさくじょできない!
なので、さらにくにくのさくとして、じかんをおいてさくじょ。
まじ、だめなみほん。もうしわけない。
/*@
target.options[ target.length ] = new Option();
setTimeout((function(_){return function(){_.options[_.length-1]=null}})(target),100);
@*/
返事が遅れてしまって申し訳ございません。
いままでいただいた意見を参考に、がんばってみます。
本当に1から10までありがとうございます!
No.9
- 回答日時:
かんちがいしているとおもわないけど
#7の
/*@
target.add( new Option() );
target.length--;
@*/
を
/*@
target.options[ target.length ] = new Option();
setTimeout((function(_){return function(){_.options[_.length-1]=null}})(target),100);
@*/
にかえると、IEでもなんとかうごきます。
本当にご丁寧にありがとうございます。
IEでも大丈夫でした!
なんとか組み込むこともできました。
このたびは、本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 消費税 消費税の納税額の計算 1 2023/02/19 18:12
- その他(お金・保険・資産運用) 至急!【Wolt】各メニューの価格設定の簡単な計算方法 3 2023/03/05 11:58
- その他(学校・勉強) 計算の仕方を教えてください。 ココナラで商品を販売することになったのですが、郵送する必要がでてきまし 1 2022/07/31 20:21
- 会社・職場 レジの打ち間違いについて お弁当屋でレジの仕事してるんですが… 1つの商品を打ち間違いして レジ締め 2 2023/07/14 14:57
- 投資・株式の税金 一般口座で同一銘柄の総平均法のことで 1 2023/02/27 22:08
- その他(保険) 投資目的の保険商品について。受取時にかかる税金について保険会社に質問しました。 商品を端的に説明する 3 2023/08/08 20:33
- 格安スマホ・SIMフリースマホ 今 ahamoを使っていて 4898円以下になる携帯会社があれば乗り換えたいです 20GBと24時間 9 2022/09/27 07:43
- Excel(エクセル) 【エクセル関数】複数条件に該当する場合、別の列の数値を合算する。 9 2022/07/09 08:46
- その他(データベース) accessでの請求管理について 2 2022/06/13 21:51
- 確定申告 個人事業者が源泉徴収額ありで法人に請求書を出す書き方について 2 2022/06/22 22:03
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
selectを変更不可にしたい
-
プルダウン選択を変更すると、...
-
javascriptでセレクトボックス...
-
javascriptでoptionタグを削除...
-
スマホのフォームでのselect複...
-
SELECTタグで変更禁止にする方法
-
プルダウンメニューに連動する...
-
selectのすべての値を送信する方法
-
hiddenに値を設定する方法
-
全てのselect要素をデフォルト...
-
Selectボックスの一覧表示方法
-
プルダウンを選択していないと...
-
select要素のvalueを配列で取得...
-
webページの一部のみの更新につ...
-
「年」「月」二つのドロップダ...
-
javascriptで計算フォームを作...
-
変数にフォーム名を指定したい
-
同じ名前のセレクトがある場合...
-
selectボックスで選択数を制限...
-
jqueryでselect要素を表示・非...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
JavaScriptで<select>の<option...
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
【JS】selectでchangeした時の...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
同じ名前のセレクトがある場合...
-
プルダウンの値によって活性・...
-
selectが変更されたらnameを指...
-
【javascript】連想配列からセ...
-
3つのselectでURLパラメータを...
-
複数のプルダウンを1つにまとめ...
-
selectボックスで選択数を制限...
-
セレクトボックスで配列を呼び...
おすすめ情報