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

解決済

質問者：ritzkun
質問日時：2009/02/04 17:00
回答数：2件

色々、既出のログをみたのですがいまいちよくわからないことがあったので質問させてもらいます。当方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日の金額から自動計算したいです。

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： fujillin
回答日時：2009/02/04 19:16

どこまでできているのか不明ですが、勉強なさってください。

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>

この回答への補足

>入力して計算結果を表示した後、どうするつもりなのかですねぇ。

なるほど…
そりゃそうです。説明不足で申し訳ないです…

計算結果を出したものをつかってレンタル用のカートに
反映させるつもりです。

いまのところ、プルダウンで
【個数】と【レンタル期間】を別々に入力し、
レンタル用のカートのボタンをクリックすることでphpで反映させてます。

ただ、phpは自分でつくったものではなく、別の人がつくったものなので
どうやって反映させているのかはわからないです。

補足日時：2009/02/04 22:34

通報する

- 0
- 件

通報する

No.2

回答者： Splatter
回答日時：2009/02/04 19:33

ちょっと長いですが…。

メモ帳にでも貼り付けて、HTMLファイルで保存して下さい。
あくまで自動計算のみです。

------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<HEAD>
<TITLE>質問番号4688991</TITLE>
<STYLE TYPE="text/css">

</STYLE>
<SCRIPT language="JavaScript" type="text/javascript">

</script>
</HEAD>
<BODY ONLOAD="SelectCarriage();">

<TABLE BORDER="1">
<TR>
<TD BGCOLOR="LIGHTPINK">送料選択</TD>
<TD>
<SELECT ID="selection"
onchange="SelectCarriage();">
<OPTION VALUE="1">送料1</OPTION>
<OPTION VALUE="2">送料2</OPTION>
<OPTION VALUE="3">送料3</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>

<TABLE BORDER="1">
<TR>
<TD BGCOLOR="LIGHTBLUE">個数</TD>
<TD BGCOLOR="LIGHTBLUE">商品レンタル期間</TD>
<TD BGCOLOR="LIGHTGREY">送料</TD>
<TD BGCOLOR="LIGHTGREY">金額</TD>
<TD BGCOLOR="LIGHTGREY">税込</TD>
</TR>

<TR>
<TD>
<SELECT NAME="count"
onchange="CalcAmount(0);">
<OPTION VALUE="0"></OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
<OPTION VALUE="4">4</OPTION>
<OPTION VALUE="5">5</OPTION>
</SELECT>
</TD>
<TD>
<SELECT NAME="term"
onchange="CalcAmount(0);">
<OPTION VALUE="0"></OPTION>
<OPTION VALUE="1">1泊2日</OPTION>
<OPTION VALUE="2">2泊3日</OPTION>
<OPTION VALUE="3">3泊4日</OPTION>
</SELECT>
</TD>
<TD>
\<INPUT TYPE="TEXT" ID="carriage" CLASS="noborder" VALUE="0" READONLY>
</TD>
<TD>
\<INPUT TYPE="TEXT" NAME="total" CLASS="noborder" VALUE="0" READONLY>
</TD>
<TD>
\<INPUT TYPE="TEXT" NAME="taxin" CLASS="noborder" VALUE="0" READONLY>
</TD>
</TR>

<TR>
<TD>
<SELECT NAME="count"
onchange="CalcAmount(1);">
<OPTION VALUE="0"></OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
<OPTION VALUE="4">4</OPTION>
<OPTION VALUE="5">5</OPTION>
</SELECT>
</TD>
<TD>
<SELECT NAME="term"
onchange="CalcAmount(1);">
<OPTION VALUE="0"></OPTION>
<OPTION VALUE="1">1泊2日</OPTION>
<OPTION VALUE="2">2泊3日</OPTION>
<OPTION VALUE="3">3泊4日</OPTION>
</SELECT>
</TD>
<TD>
\<INPUT TYPE="TEXT" NAME="carriage" CLASS="noborder" VALUE="0" READONLY>
</TD>
<TD>
\<INPUT TYPE="TEXT" NAME="total" CLASS="noborder" VALUE="0" READONLY>
</TD>
<TD>
\<INPUT TYPE="TEXT" NAME="taxin" CLASS="noborder" VALUE="0" READONLY>
</TD>
</TR>

</TABLE>
<BR>
商品単価は500円です。<BR>
送料1を選択すると送料が100円になります。<BR>
送料2を選択すると送料が200円になります。<BR>
送料3を選択すると送料が300円になります。<BR>
個数or商品レンタル期間を選択時に金額計算を行います。<BR>
個数or商品レンタル期間が未入力の場合、金額は0円になります。<BR>
金額は商品単価×個数×レンタル期間倍率＋送料です。<BR>
1泊2日のレンタル期間倍率は1.0です。<BR>
2泊3日のレンタル期間倍率は1.2です。<BR>
3泊4日のレンタル期間倍率は1.4です。<BR>
税込金額は金額×税率(1.05固定)です。<BR>
送料選択時には再計算を行います。<BR>
</BODY>
</HTML>

この回答への補足

大変、親切にソースを書いていただき恐縮です。
下記内容を補足させていただきます。

まず、せっかく教えていただいて申し訳ないのですが

<TABLE BORDER="1">
<TR>
<TD BGCOLOR="LIGHTPINK">送料選択</TD>
<TD>
<SELECT ID="selection"
onchange="SelectCarriage();">
<OPTION VALUE="1">送料1</OPTION>
<OPTION VALUE="2">送料2</OPTION>
<OPTION VALUE="3">送料3</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>

の部分で、送料は選択ではなくソースを書く際に選択できるように
したいです。ユーザー側で選択するのではなく自動計算の式の中に組み込めないかなぁという意味です。

説明不足で申し訳ありません…

また、初歩的なことかもわからないのですがtableをつかわなくても大丈夫ですか？

下記回答にも補足したのですが、自動計算後、PHPで制作したカートへその自動計算後の料金を転送したいのです。
現在のものは、
【個数】と【レンタル期間】を別々にプルダウンで選択して、カートボタンを押すとphpへジャンプします。レンタル期間に料金は含まれるようになっています。
例えば

【2個】【1泊2日\100】と選択するとような感じです。
カートへは

1泊2日　　2個　　200円
-----------------------------
合計:200円

というような画面になります。

説明不足で申し訳ありませんが教えてください…