個人事業主の方必見!確定申告のお悩み解決

【JavaScript】プルダウンで数字を選択後、即時計算したいですが
方法がわかりません。

http://bunjin.com/java/calc.html

以上のサンプルページでは、チェックボックスを押した直後、
下部のテキストボックスに金額が表示されるように設定されていますが、
チェックボックスの横などにプルダウンで数字を表示させて、
その数字の積を合計金額に表示させたいのです。

例)
「ラーメン(500円)」のチェックボックスにチェック(合計金額には「500 円」と表示)

その「ラーメン(500円)」の横にプルダウンボックスを選択(値は1,2,3,・・・)

選択した値により、合計金額を変化させたい(プルダウンで1を選べば500円、2を選べば1000円、・・・)

どうかよろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

最終的にどのような構造になるのか不明なので、よくわかりませんが…



ご参考まで。
(マークアップがリストがよいのか表がよいのかわかりませんが、とりあえずリストで…)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
form#form1 ul { list-style-type:none; margin:0; padding:0; }
form#form1 span { display:inline-block; width:10em; }
form#form1 select { width:4em; }
form#form1 div { margin-top:0.8em; }
form#form1 div input { width:6em; }
</style>
<script type="text/javascript">
<!--
function calc(e) {
var i = 0, total = 0, str, elm = e.form.elements;
while (e = elm[i++]) {
if (e.nodeName == "SELECT" && e.value != "0") {
str = e.previousSibling;
while (str && str.nodeName != "SPAN") str = str.previousSibling;
str = str?str.firstChild.nodeValue:"no";
str = Number(str.replace(/^.+[((]([0-9]+)円[))]$/,"$1"));
if (!isNaN(str)) total += +str * e.value;
}
}
elm["goukei"].value = total == 0?"":total;;
}
//-->
</script>
</head>
<body>
<form id="form1">
<ul>
<li><span>ラーメン(500円)</span>
<select name="s1" onchange="calc(this)">
<option value="0" selected>--
<option value="1">1
<option value="2">2
<option value="3">3
</select>
</li>
<li><span>チャーハン(600円)</span>
<select name="s2" onchange="calc(this)">
<option value="0" selected>--
<option value="1">1
<option value="2">2
<option value="3">3
</select>
</li>
<li><span>酢豚(700円)</span>
<select name="s3" onchange="calc(this)">
<option value="0" selected>--
<option value="1">1
<option value="2">2
<option value="3">3
</select>
</li>
</ul>
<div><span>合計金額:</span>
<input type="text" name="goukei" readonly value="">円
</div>
</form>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます。
思い通りの結果が出力されました。

かなり悩んでいたのですが、これならどうにか自分の満足できる成果物が出来そうです。
本当にありがとうございました。

また質問するかもしれませんが、そのときはまたよろしくお願いします。

お礼日時:2010/06/25 17:28

考え方は参考サイトの方法のままでいけます。



ただし、プルダウンの場合はonclickではなくonchangeでイベントを取得するようにしておけば、値が変わったときのイベントを取得できます。
あとは、足し算に掛け算が加わるだけです。

でも数量をセレクトで入力させるのなら、チェックボックスが不要だと思うけど。(入力が2度手間では?)
セレクトボックスの初期値を0(または「---」など)にしておいて、個数が入力されたら計算するようにすれば?

この回答への補足

早速のご返答ありがとうございます。
一応チェックボックスは確かに不要なので削除しますが、
チェックボックス自体に

<input type="checkbox" value="500" onclick="calc_total()">

と、valueに"500"と付けられているため、
このチェックボックスを外してしまうとうまく作動が出来ないような気がしてならないんです。

もし、「ラーメン(500円)」と表示されている文章自体にnameやvalueを付属させることが出来れば問題は無いのですが、そのような方法もあるかどうか・・・。

もしよければそれも教えていただけないでしょうか。
質問ばかりで申し訳ないですが、よろしくお願いします。

補足日時:2010/06/25 14:37
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qselectを使った計算

セレクトボックスをいくつか設置してそれぞれで選択したものの
value値(数値)の合計をリアルタイムで表示させたいんですが、どうしたらいいのでしょうか?

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>Sample</title>
<script type="text/javascript"><!--
function s(f){
f.sum.value = parseInt(f.s1.value) + parseInt(f.s2.value) + parseInt(f.s3.value);
}
//-->
</script>
</head>
<body>
<form>
<select name="s1" onchange="s(this.form)">
<option value="0">-</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="s2" onchange="s(this.form)">
<option value="0">-</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<select name="s3" onchange="s(this.form)">
<option value="0">-</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
<input name="sum" type="text" value="0" style="text-align:right">
</form>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>Sample</title>
<script type="text/javascript"><!--
function s(f){
f.sum.value = parseInt(f.s1.value) + parseInt(f.s2.value) + parseInt(f.s3.value);
}
//-->
</script>
</head>
<body>
<form>
<select name="s1" onchange="s(this.form)">
<option value="0">-</option>
<option value="0">0</option>
<option value=...続きを読む

QJavaScriptによる自動計算フォーム

サンプルを読んだりは多少わかる範囲なのですが、カスタムの段階で詰まってしまいましたのでお知恵お貸し頂ければと思います。

積算の自動計算フォームを作成しようとしてるのですが、サンプルでよくあるものが固定数値×プルダウン=小計のようなものが多く、この固定数を入力フォーム、プルダウンも入力フォームに切り替えたいのですが、変更すると合計欄がNaNと表示されてしまいます。
何か指定が間違っているのでしょうか。

こちらのサイトを参考に作っています。
http://www.tagindex.com/javascript/form/comp1b.html

宜しくお願いします。

Aベストアンサー

まず、ご質問の内容についてですが・・・、
実際のコードを示せば、すぐに的確な回答がついたかもしれません。

本題に戻ります。たぶんどこかで構文ミスをしているのでしょう。
私もよくやってしまうのですが、NaN や undefined が出ます。

内容が複雑ではないので、私なりに作成してみました。
入力フォームということで、テキストボックスで良いでしょうか。

<html><head>
<script type='text/javascript'>
function keisan(){
var price1 = (document.form1.tanka1.value) * (document.form1.suryo1.value);
document.form1.kingaku1.value = price1 ;
var price2 = (document.form1.tanka2.value) * (document.form1.suryo2.value);
document.form1.kingaku2.value = price2 ;
var price3 = (document.form1.tanka3.value) * (document.form1.suryo3.value);
document.form1.kingaku3.value = price3 ;
document.form1.total.value = price1 + price2 +price3;
}
</script></head>
<body>
<form name='form1'>
<table border='1'>
<tr><td align='center'>商品</td>
<td align='center'>単価</td>
<td align='center'>数量</td>
<td align='center'>金額</td></tr>
<tr><td>商品1</td>
<td><input type='text' name='tanka1' onChange='keisan()' style='width:100px' />円</td>
<td><input type='text' name='suryo1' onChange='keisan()' style='width:50px' /></td>
<td><input type='text' name='kingaku1' style='width:100px' />円</td></tr>
<tr><td>商品2</td>
<td><input type='text' name='tanka2' onChange='keisan()' style='width:100px' />円</td>
<td><input type='text' name='suryo2' onChange='keisan()' style='width:50px' /></td>
<td><input type='text' name='kingaku2' style='width:100px' />円</td></tr>
<tr><td>商品3</td>
<td><input type='text' name='tanka3' onChange='keisan()' style='width:100px' />円</td>
<td><input type='text' name='suryo3' onChange='keisan()' style='width:50px' /></td>
<td><input type='text' name='kingaku3' style='width:100px' />円</td></tr>
<tr><td align='right' colspan=3>合計</td>
<td><input type='text' name='total' style='width:100px' />円</td></tr>
</table>
</form>
</body></html>

まず、ご質問の内容についてですが・・・、
実際のコードを示せば、すぐに的確な回答がついたかもしれません。

本題に戻ります。たぶんどこかで構文ミスをしているのでしょう。
私もよくやってしまうのですが、NaN や undefined が出ます。

内容が複雑ではないので、私なりに作成してみました。
入力フォームということで、テキストボックスで良いでしょうか。

<html><head>
<script type='text/javascript'>
function keisan(){
var price1 = (document.form1.tanka1.value) * (document.form1.suryo1.value);...続きを読む

Qjavascriptで自動計算フォームを作りたいのですが

色々、既出のログをみたのですがいまいちよくわからないことがあったので質問させてもらいます。当方htmlの知識はほどほどにありますがjsやフォームはあまりよくわかりません。またcgiではなくjsを使いたいと思っています。部分的には既出のものとかぶることもあるのですが、詳細をどのように設定していいかなどもわからなかったもので…宜しくお願いします。

■まず下記の計算をしたいと思っています。

(1)【個数】×【商品レンタル期間】+【送料】×=Web上に表示される金額
(2)【個数】×【商品レンタル期間】+【送料】×【消費税】=上記の下に金額

(1)と(2)は縦列もしくは並列に表記するつもりです。
例えば、500円(税込525円)みたいな感じで

・【個数】は、プルダウンで選択させるようにするつもりです。
・【商品レンタル期間】は
1泊2日、2泊3日、3泊4日の中からプルダウンで選択させるようにするつもりです。ここを
・【送料】は、固定です。
ただ、送料は3種類あって、小中大と分けたいです。
例えばこんな感じでできるとありがたいです。
表示部分には「送料」としか表示されずに、
soryo1と指定すれば100円
soryo2と指定すれば200円
soryo3と指定すれば300円
となるようにしたいです。
ただ、この送料の部分は固定ですのでプルダウン選択はなしです。

■javascriptはJQueryなどのライブラリはなしでできるだけしたいです。
またjavascript自体は、外部からのリンクにするつもりです。

■【商品レンタル期間】のところについて

基準となる金額が1泊2日200円の場合に
2泊3日は1泊2日の1.2倍
3泊4日は1泊2日の1.4倍
という風に、基準となる1泊2日の金額から自動計算したいです。

ながながと書いたあげく、説明が下手で申し訳ありませんが
どなたかわかりやすく教えていただけるとありがたいです。
宜しくお願いいたします。

色々、既出のログをみたのですがいまいちよくわからないことがあったので質問させてもらいます。当方htmlの知識はほどほどにありますがjsやフォームはあまりよくわかりません。またcgiではなくjsを使いたいと思っています。部分的には既出のものとかぶることもあるのですが、詳細をどのように設定していいかなどもわからなかったもので…宜しくお願いします。

■まず下記の計算をしたいと思っています。

(1)【個数】×【商品レンタル期間】+【送料】×=Web上に表示される金額
(2)【個数】×【商品レンタル期間】...続きを読む

Aベストアンサー

どこまでできているのか不明ですが、勉強なさってください。
HTMLもscriptも提示されていないので、とりあえず、ごくプリミティブな参考例です。(単価100の設定で、計算結果を表示)

1)プルダウンに対応させたらどうなるか?
2)文字を入力するとエラー表示(NaN)になるけど、回避するには?
3)計算の途中で条件判断したり、分岐するには?
などなど、いろいろありますので調べてみてください。
(適当に検索しても、結構情報は見つかるはずです)

質問文で一番疑問なのは、入力して計算結果を表示した後、どうするつもりなのかですねぇ。(javascriptだけだと、後はどうしようもないけど…)

<html>
<script type="text/javascript">
function calc() {
var tanka = 100;
var kazu = atai('kazu');
var kikan = atai('kikan');
var soryo = atai('soryo');
var result = tanka*kazu*kikan + soryo;
document.getElementById('result').innerHTML = result + '円';
}
function atai(eId){
return parseInt(document.getElementById(eId).value);
}
</script>
<body>
<p>個 数:<input type="text" id="kazu">
<br>期 間:<input type="text" id="kikan">
<br>送 料:<input type="text" id="soryo">
<p><input type="button" value=" 計算 " onclick="calc()">
<p>
<div style="width:400px;border:1px solid gray;padding:8px;">
【個数】×【レンタル期間】+【送料】=<span id="result"></span>
</div>
</body>
</html>

どこまでできているのか不明ですが、勉強なさってください。
HTMLもscriptも提示されていないので、とりあえず、ごくプリミティブな参考例です。(単価100の設定で、計算結果を表示)

1)プルダウンに対応させたらどうなるか?
2)文字を入力するとエラー表示(NaN)になるけど、回避するには?
3)計算の途中で条件判断したり、分岐するには?
などなど、いろいろありますので調べてみてください。
(適当に検索しても、結構情報は見つかるはずです)

質問文で一番疑問なのは、入力して計算結果を表示...続きを読む

QjQueryで合計を出したい

<table>

<tr>
<td class="point"><input type="text"></td>
<td class="point"><input type="text"></td>
<td class="point"><input type="text"></td>
<td class="point"><input type="text"></td>
</tr>

</table>

とHTMLで記述していて、jQueryを下記のように記述しました。
var total;
j$(".point:text").change(function(){
j$(".point:text").each(function(){
var point = j$(this).val();
total = parseInt(point)+total;
});
alert(total);
});

alertで返ってくる結果が「NaN」となります。
どのようにすれば合計値が求められるでしょうか。

やりたいことは「pointクラス」内のテキストフォームの値を合計したいです。

<table>

<tr>
<td class="point"><input type="text"></td>
<td class="point"><input type="text"></td>
<td class="point"><input type="text"></td>
<td class="point"><input type="text"></td>
</tr>

</table>

とHTMLで記述していて、jQueryを下記のように記述しました。
var total;
j$(".point:text").change(function(){
j$(".point:text").each(function(){
var point = j$(this).val();
total = parseInt(point)+total;
});
alert(total);
});

alertで返ってくる結果が「NaN」となります。
...続きを読む

Aベストアンサー

こんな感じで如何でしょう。

<html>
<head>
<title>テスト</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
var total;
$(".point input:text").change(function(){
total=0;
$(".point input:text").each(function(){
var point = $(this).val();
total = parseInt(point)+total;
});
alert(total);
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="point"><input type="text" value="0" /></td>
<td class="point"><input type="text" value="0" /></td>
<td class="point"><input type="text" value="0" /></td>
<td class="point"><input type="text" value="0" /></td>
</tr>
</table>
</body>
</html>

こんな感じで如何でしょう。

<html>
<head>
<title>テスト</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
var total;
$(".point input:text").change(function(){
total=0;
$(".point input:text").each(function(){
var point = $(this).val();
total = parseInt(point)+total;
});
alert(total);
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="poin...続きを読む

Q【Excel】プルダウンリストを作成して項目に値を関連付けるには

初めて投稿させて頂きます。

現在、Excel2003を使用し簡単な経費・収支管理表を
作成しようとしています。

その際に、入力の手間や計算間違いを
避けるためにプルダウンリストを作成し、
そのリストの各項目に数値を関連付け、
自動計算をする際に、セルには文字を表示したまま
その関連付けた値を計算して計を出したいのですが、
やり方をご存知な方がおりましたら教えて頂けないでしょうか?

やりたい事としては、まず入力規則等で作成した
下記の商品プルダウンリストが有るとします。
----------------
■商品リスト
[商品名]
みかん
りんご
イチゴ
すいか
めろん
----------------

その各商品へ価格を関連付け
----------------
■リスト
[商品名] [価格]
みかん  100
りんご  150
イチゴ  260
すいか  420
めろん  540
----------------

エクセルで表示する際に、
以下の様にしたいです。
----------------
[商品名] [個数] [計]
みかん▼  2   \200
りんご▼  1   \150
イチゴ▼  3   \780
すいか▼  1   \420
めろん▼  0   \0
----------------

よろしくお願い致します。

初めて投稿させて頂きます。

現在、Excel2003を使用し簡単な経費・収支管理表を
作成しようとしています。

その際に、入力の手間や計算間違いを
避けるためにプルダウンリストを作成し、
そのリストの各項目に数値を関連付け、
自動計算をする際に、セルには文字を表示したまま
その関連付けた値を計算して計を出したいのですが、
やり方をご存知な方がおりましたら教えて頂けないでしょうか?

やりたい事としては、まず入力規則等で作成した
下記の商品プルダウンリストが有るとします。
------...続きを読む

Aベストアンサー

>項目名の裏で値を設定できるような感じです。

プルダウンリストの作成は、入力規則で設定出来ます。
http://www.eurus.dti.ne.jp/~yoneyama/Excel/n-kis.htm

ここで選択した値と何かをリンクさせるには、先にお答えしたようにVLOOKUP等の関数で行う必要があります。

>できれば単価の値は表示したくなく、

別のセルに式を埋め込むか単価欄に全ての式を埋め込む事になります。
余計な表示をしないようにするには、IF文等で工夫する必要があります。
http://www.eurus.dti.ne.jp/~yoneyama/Excel/kansu/if_is.htm


=IF([商品名]="" ,0,VLOOKUP(式・・・・) * [個数])

Q