JavaScriptで注文フォームの合計金額の計算がしたいと思っております。


以下のような注文ページを作っています。
http://www.hkky.com/keisan.html

通常の商品単価は5000円です。
継続購入を希望する方は特別価格の4500円で購入できます。

継続を希望しない方と希望する方によって、単価が変わるため、どのように合計金額を表示すればいいのか分かりません。
条件分岐をすればいいのだとは思うのですが・・・。

1.「希望しない」の場合
購入個数を選んでもらったら、自動で合計(name="goukei")のフォームに「5000円*個数の金額」を表示させるようにしたいです。

2.「希望する」の場合
単価の5000円の表示(name="tanka")のフォームを「4500」という表示に変えて、購入個数を選んでもらったら、自動で「4500円*個数の金額」を表示させるようにしたいです。

JavaScriptを利用してうまく表示する方法を教えていただけるとうれしいです。
どうぞよろしくお願いいたします。

回答の条件
  • 1人2回まで
  • 登録:2007/04/11 22:43:53
  • 終了:2007/04/12 08:40:59

ベストアンサー

id:studioes No.1

studioes回答回数522ベストアンサー獲得回数612007/04/11 22:58:49

ポイント50pt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<SCRIPT TYPE='text/javascript'>

<!--

function chgContinue(sel){

if( sel.value =="yes"){

document.getElementById('price').value="4500";

}else{

document.getElementById('price').value="5000";

}


chgQty();

}

function chgQty(){

document.getElementById('goukei').value = document.getElementById('price').value * document.getElementById('qty').value;

}

//-->

</SCRIPT>

<title>計算</title>

</head>

<body>

<table width="600" border="1">

<tr>

<th scope="col">商品名</th>

<th scope="col">単価</th>

<th scope="col">個数</th>

<th scope="col">合計</th>

</tr>

<tr>

<td>健康食品</td>

<td><input name="tanka" type="text" id="price" value="5000" size="7" readonly>

円</td>

<td>

<label>

<select name="select" id="qty" onChange="chgQty()">

<option value="1" selected>1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

個</label></td>

<td><input name="goukei" type="text" value="" id="goukei" size="7" readonly>円</td>

</tr>

<tr>

<td>継続購入を希望されますか?</td>

<td colspan="3">

<select name="keizoku" id="selContinue" size="1" onChange="chgContinue(this)">

<option value="yes">希望する</option>

<option value="no" selected="selected">希望しない</option>

</select></td>

</tr>

</table>

</body>

</html>

これでどうかね。

id:pitagora

どうもありがとうございます!

3時間以上苦戦していたの問題を解決していただいて、とてもれうしいです。

本当にありがとうございました(^^)

2007/04/12 08:38:34

その他の回答(1件)

id:studioes No.1

studioes回答回数522ベストアンサー獲得回数612007/04/11 22:58:49ここでベストアンサー

ポイント50pt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<SCRIPT TYPE='text/javascript'>

<!--

function chgContinue(sel){

if( sel.value =="yes"){

document.getElementById('price').value="4500";

}else{

document.getElementById('price').value="5000";

}


chgQty();

}

function chgQty(){

document.getElementById('goukei').value = document.getElementById('price').value * document.getElementById('qty').value;

}

//-->

</SCRIPT>

<title>計算</title>

</head>

<body>

<table width="600" border="1">

<tr>

<th scope="col">商品名</th>

<th scope="col">単価</th>

<th scope="col">個数</th>

<th scope="col">合計</th>

</tr>

<tr>

<td>健康食品</td>

<td><input name="tanka" type="text" id="price" value="5000" size="7" readonly>

円</td>

<td>

<label>

<select name="select" id="qty" onChange="chgQty()">

<option value="1" selected>1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

個</label></td>

<td><input name="goukei" type="text" value="" id="goukei" size="7" readonly>円</td>

</tr>

<tr>

<td>継続購入を希望されますか?</td>

<td colspan="3">

<select name="keizoku" id="selContinue" size="1" onChange="chgContinue(this)">

<option value="yes">希望する</option>

<option value="no" selected="selected">希望しない</option>

</select></td>

</tr>

</table>

</body>

</html>

これでどうかね。

id:pitagora

どうもありがとうございます!

3時間以上苦戦していたの問題を解決していただいて、とてもれうしいです。

本当にありがとうございました(^^)

2007/04/12 08:38:34
id:llusall No.2

llusall回答回数505ベストアンサー獲得回数612007/04/11 23:17:46

ポイント50pt

<html>

<body>

<table width="600" border="1">

<tr>

<th scope="col">商品名</th>

<th scope="col">単価</th>

<th scope="col">個数</th>

<th scope="col">合計</th>

</tr>

<tr>

<td>健康食品</td>

<td><input id="tanka" type="text" value="5000" size="7" readonly>円</td>

<td>

<label>

<select id="select" onChange="calc();">

<option value="1" selected>1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

個</label></td>

<td><input id="goukei" type="text" value="" size="7" readonly>円</td>

</tr>

<tr>

<td>継続購入を希望されますか?</td>

<td colspan="3">

<select id="keizoku" size="1" onChange="calc();">

<option value="希望する">希望する</option>

<option value="希望しない" selected="selected">希望しない</option>

</select></td>

</tr>

</table>

</body>

</html>

<script Language="JavaScript">

<!-- 

function calc() {

    var tankaObj = document.getElementById("tanka");

    var suryoObj = document.getElementById("select");

    var gokeiObj = document.getElementById("goukei");

    var keizokuObj = document.getElementById("keizoku");

    if(keizokuObj[keizokuObj.selectedIndex].value=="希望しない"){

        // 希望しない

        tankaObj.value = 5000;

    }else{

        // 希望する

        tankaObj.value = 4500;

    }

    gokeiObj.value = suryoObj.value * tankaObj.value;

}

// -->

</script>

※便宜上、name を id に変更してしまいました。

id:pitagora

どうもありがとうございます!

いろいろな記述の仕方があるのですね~。

自分でももっと勉強してみます。

本当にありがとうございました(^^)

2007/04/12 08:39:32

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません