- ベストアンサー
JavaScriptで選択結果の合計金額を計算し、フォームメールとして送信する方法
- JavaScriptを使用して、選択結果の合計金額を計算し、ウェブページ上で確認できるようにする方法について説明します。
- さらに、氏名や住所などの情報を入力し、選択結果と合計金額と共にフォームメールとして送信できるようにする方法についても解説します。
- ただし、現在のスクリプトでは選択結果が数字のみで表示されるため、どの本数パックが選択されたか判別することができません。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
つづき（全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #form1 { width: 25em; } #form1 input { margin-left: 1em; } </style> <script type="text/javascript"> <!-- function check(evt, frm){ var t = evt.target || evt.srcElement; if (!typecheck(t)) return; var e, txt, title, i = 0, elms = frm.elements, html = "選択状態"; while(e = elms[i++]){ if(typecheck(e) && e.checked){ html += "<br> " + "title=" + title(e) + " / name=" + e.name; html += " / value=" + e.value + " / text=" + text(e); } } document.getElementById("result").innerHTML = html; function typecheck(e){ return (e.nodeName == "INPUT" && e.type == "radio"); } function text(e){ var c = e.nextSibling, txt; return c.nodeType == 3?c.nodeValue:""; } function title(e){ var p = e.parentNode, leg; while (p && p.nodeName != "FIELDSET") p = p.parentNode; if(p) leg = p.getElementsByTagName("legend")[0]; return leg?leg.innerHTML:""; } } //--> </script> </head> <body> <form id="form1" action="#" method="" onclick="check(event, this)"> <fieldset> <legend>本数</legend> <input type="radio" name="number" value="50" checked>3本パック <input type="radio" name="number" value="50">4本パック <input type="radio" name="number" value="100">5本パック </fieldset> <p> <fieldset> <legend>サイズ</legend> <input type="radio" name="size" value="0" checked>Sサイズ <input type="radio" name="size" value="20">Mサイズ <input type="radio" name="size" value="20">Lサイズ </fieldset> <p> <fieldset> <legend>色</legend> <input type="radio" name="color" value="red" checked>赤 <input type="radio" name="color" value="blue">青 <input type="radio" name="color" value="black">黒 </fieldset> </form> <p> <div id="result"></div> </body> </html>
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
#2、#3です。 #2に書いておくつもりで、書き忘れました。 例に挙げたサンプルは、HTMLのテキストを読み込んでいますが、改行なども一緒に拾っているので、値を使用するときには注意が必要です。
- fujillin
- ベストアンサー率61% (1594/2576)
＞「value」に2つの値をセットする方法 基本的には値はひとつしか持てません。 でも、ひとつの値に複数の意味を持たせれば、同様の目的は果たすことができます。 例えば、適当な区切り文字を付けておいて <input type="radio" name="size" value="M_20">Mサイズ value値を『_』で分割してあげれば、2つの値として利用することもできます。 （正規表現などで分割できれるものであれば、区切り文字なしでもＯＫです。上例なら"M20"でもいけそう） あるいは、value以外の属性値を利用するという方法もありますが、formの送信の際に値が送られないので、value値を利用する方が良いと思われます。 一方で、選択した値が必要であるならその内容を識別できるようにvalue値を設定しておくのが普通だと思われますので、ご提示のような設定方法は少々無理があるかも知れません。パックの種類を入力させるのであれば、その単価は別にテーブルで持っておいて、スクリプト側で換算するのが一般的ではないでしょうか？ それであれば、サーバー側にも単価テーブルがあれば、直接単価を送信する必要もなくなります。 まぁ、ご提示ようなマークアップのままで行いたいのであれば、HTMLからテキストなどを参照するという方法でもいけるかも… 例えば（識別するだけの例なので応用は適当にどうぞ） 文字数制限に引っかかるので、例は別に投稿します。
お礼
ありがとうございます。すぐにお礼出来なく失礼いたしました。 私の技術レベルが低いので上手く出来るかどうか不安ですが、皆さんに教えて頂いた方法で試してみます。
- luka3
- ベストアンサー率72% (453/623)
自分なら、 <INPUT type="hidden" name="選択パック" value=""> というのを用意して、 <LABEL><INPUT type="radio" name="本数" value="50" onclick="document.nForm.選択パック.value='3本'") /> 3本パック</LABEL> というふうにやるかな。 合計の計算時に問題があれば、type="hidden"をチェックして計算対象外にすればいいと思います。 別な方法としては、送信ボタンを押した直後に関数を呼び出して、ラジオボタンの何番目を選択しているかを調べて、value値を金額から文字列に変えてPOSTされればいいですね。
お礼
ありがとうございます。すぐにお礼出来なく失礼いたしました。 私の技術レベルが低いので上手く出来るかどうか不安ですが、皆さんに教えて頂いた方法で試してみます。
お礼
ありがとうございます。すぐにお礼出来なく失礼いたしました。 私の技術レベルが低いので上手く出来るかどうか不安ですが、皆さんに教えて頂いた方法で試してみます。