人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

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

●質問者: pitagora
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript name 価格 希望 継続
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● studioes
●50ポイント ベストアンサー

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

これでどうかね。

◎質問者からの返答

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

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

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


2 ● llusall
●50ポイント

<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 に変更してしまいました。

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ