痔になりやすい生活習慣とは?

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

A 回答 (1件)

<!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>
    • good
    • 0
この回答へのお礼

ありがとうございました。
やりたかったことそのままです。

お礼日時:2006/09/18 17:38

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

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

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

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

Q【JavaScript】プルダウンで数字を選択後、即時計算したいですが

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

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

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

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

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

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

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

Aベストアンサー

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

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

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

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

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

<!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 sp...続きを読む

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);...続きを読む

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