<script language="JavaScript">
<!--
// 項目の合計を計算
function ttlValue() {
chn = 27; // ラジオボタンとチェックボックスの総数
ttl = 0;
for(i=0; i<chn; i++) {
if(document.nForm.elements[i].checked) {
ttl += eval(document.nForm.elements[i].value);
}
}
document.nForm.result.value = ttl;
}
//-->
</script>
上のスクリプトを使い、選択結果(合計金額)をウエブページ上で確認できるように作りました。
更に、氏名や住所などを入力してもらい、選択結果・合計金額と共にフォームメールとして送信できるようにしました。
一連の流れはできたのですが、どうしても解決できない事があります。
例えば
<INPUT type="radio" name="本数" value="50" checked="checked" /> 3本パック</td>
<INPUT type="radio" name="本数" value="50" checked="checked" /> 4本パック</td>
<INPUT type="radio" name="本数" value="100" checked="checked" /> 5本パック</td>
の場合「value="50"・value="50"・value="100"」となってますからちゃんと計算してくれますが、
フォームメールとして受け取った場合「何本パック」なのか判別できません。
(数字しか記載がないため、上の例で言うと 3本パックと 4本パックの判別ができません)
こんな画像を用意しました。
http://www3.ocn.ne.jp/~aiworks/chie/
「valueに2つの値をセットする」と聞いたことがありますが、どの様にするのか分かりません。
上記内容についてご教授頂ければ幸いです。
宜しくお願い致します。
No.3ベストアンサー
- 回答日時:
つづき(全角空白は半角に)
<!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>
ありがとうございます。すぐにお礼出来なく失礼いたしました。
私の技術レベルが低いので上手く出来るかどうか不安ですが、皆さんに教えて頂いた方法で試してみます。
No.4
- 回答日時:
#2、#3です。
#2に書いておくつもりで、書き忘れました。
例に挙げたサンプルは、HTMLのテキストを読み込んでいますが、改行なども一緒に拾っているので、値を使用するときには注意が必要です。
No.2
- 回答日時:
>「value」に2つの値をセットする方法
基本的には値はひとつしか持てません。
でも、ひとつの値に複数の意味を持たせれば、同様の目的は果たすことができます。
例えば、適当な区切り文字を付けておいて
<input type="radio" name="size" value="M_20">Mサイズ
value値を『_』で分割してあげれば、2つの値として利用することもできます。
(正規表現などで分割できれるものであれば、区切り文字なしでもOKです。上例なら"M20"でもいけそう)
あるいは、value以外の属性値を利用するという方法もありますが、formの送信の際に値が送られないので、value値を利用する方が良いと思われます。
一方で、選択した値が必要であるならその内容を識別できるようにvalue値を設定しておくのが普通だと思われますので、ご提示のような設定方法は少々無理があるかも知れません。パックの種類を入力させるのであれば、その単価は別にテーブルで持っておいて、スクリプト側で換算するのが一般的ではないでしょうか?
それであれば、サーバー側にも単価テーブルがあれば、直接単価を送信する必要もなくなります。
まぁ、ご提示ようなマークアップのままで行いたいのであれば、HTMLからテキストなどを参照するという方法でもいけるかも…
例えば(識別するだけの例なので応用は適当にどうぞ)
文字数制限に引っかかるので、例は別に投稿します。
ありがとうございます。すぐにお礼出来なく失礼いたしました。
私の技術レベルが低いので上手く出来るかどうか不安ですが、皆さんに教えて頂いた方法で試してみます。
No.1
- 回答日時:
自分なら、
<INPUT type="hidden" name="選択パック" value="">
というのを用意して、
<LABEL><INPUT type="radio" name="本数" value="50" onclick="document.nForm.選択パック.value='3本'") /> 3本パック</LABEL>
というふうにやるかな。
合計の計算時に問題があれば、type="hidden"をチェックして計算対象外にすればいいと思います。
別な方法としては、送信ボタンを押した直後に関数を呼び出して、ラジオボタンの何番目を選択しているかを調べて、value値を金額から文字列に変えてPOSTされればいいですね。
ありがとうございます。すぐにお礼出来なく失礼いたしました。
私の技術レベルが低いので上手く出来るかどうか不安ですが、皆さんに教えて頂いた方法で試してみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- PHP $_SESSIONについて教えて下さい。 2 2023/03/02 09:18
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
セレクトメニューで2つの項目や値を渡す方法はありますか?
HTML・CSS
-
フォームで同じ複数のnameで違うvalueの送信
Java
-
value内に変数を入れたい
JavaScript
-
-
4
日付型のフィールドに空白を入れる方法を教えてください
その他(データベース)
-
5
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
6
htmlでfor文使えますか?
HTML・CSS
-
7
jsp~jspにhiddenを使って変数を飛ばしたい
JavaScript
-
8
PHP ボタンが押されたら処理を実行する
PHP
-
9
ラジオボタンが両方とも選択できてしまう
HTML・CSS
-
10
tableタグとformタグの組み合わせ
HTML・CSS
-
11
1文字って1バイトだったっけ?
その他(パソコン・スマホ・電化製品)
-
12
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
13
別ファイルの変数を呼び出したいのですが?
PHP
-
14
GROUP BYを行った後に結合したい。
Oracle
-
15
<input>の選択肢をプルダウンメニューから受け取り、hiddenで
JavaScript
-
16
getParameterで値が取得できず、困ってます
HTML・CSS
-
17
【SQL】他テーブルに含まれる値に合致する行を抽出
その他(データベース)
-
18
html でのテキスト結合について
その他(プログラミング・Web制作)
-
19
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
20
htmlの文字が縦書きになる
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
INPUT TYPE
-
チェックボックスとセレクトボ...
-
リストボックス(multipleなsel...
-
「value」に2つの値をセットす...
-
チェックボックスグループの一...
-
音楽を、ボタンでON or OFF ...
-
wordの数式について 定積分を書...
-
チェックボックスで選択した内...
-
VB.net データーグリッドビュー...
-
左右のフレームを同時にスクロ...
-
裏掲示板の見方
-
ローカルテストサーバーと本番...
-
別formのhidden項目を自form値...
-
perl/cgi リダイレクトができない
-
誕生日のカウントダウン日数を...
-
perlで書いたcgiでsqliteの使い...
-
perlを難読化、暗号化させたい
-
チェックボックスでのvalue値の...
-
proftpdで困ってます。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
select値をhiddenのvalueに渡し...
-
「value」に2つの値をセットす...
-
INPUT TYPE
-
FORMのselectの選択肢を最初か...
-
チェックボックスとセレクトボ...
-
チェックボックスグループの一...
-
ラジオボタンを選択済みにする...
-
<select>タグの幅設定
-
OPTIONタグにループは使えない...
-
iframeごとに戻るボタンを
-
メールフォームのプルダウンメ...
-
リストボックス(multipleなsel...
-
selectboxの画面遷移で、postデ...
-
プルダウンメニューでValue値を...
-
htmlでセルの値を取得して計算...
-
一つの検索窓で複数のサイトか...
-
コンボ1の内容に応じてコンボ...
-
ラジオボタンとセレクトメニュ...
-
チェックボックスの余白を指定...
おすすめ情報