重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

「value」に2つの値をセットする方法

解決済

  • 質問者：plsplsme
  • 質問日時：
  • 回答数：4件

<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つの値をセットする」と聞いたことがありますが、どの様にするのか分かりません。

上記内容についてご教授頂ければ幸いです。
宜しくお願い致します。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

つづき（全角空白は半角に）



<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。すぐにお礼出来なく失礼いたしました。
私の技術レベルが低いので上手く出来るかどうか不安ですが、皆さんに教えて頂いた方法で試してみます。

通報する
お礼日時：2011/02/26 14:33

No.4

  • 回答者： fujillin
  • 回答日時：

#2、#3です。



#2に書いておくつもりで、書き忘れました。

例に挙げたサンプルは、HTMLのテキストを読み込んでいますが、改行なども一緒に拾っているので、値を使用するときには注意が必要です。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

＞「value」に2つの値をセットする方法


基本的には値はひとつしか持てません。
でも、ひとつの値に複数の意味を持たせれば、同様の目的は果たすことができます。

例えば、適当な区切り文字を付けておいて
　<input type="radio" name="size" value="M_20">Mサイズ
value値を『_』で分割してあげれば、2つの値として利用することもできます。
（正規表現などで分割できれるものであれば、区切り文字なしでもＯＫです。上例なら"M20"でもいけそう）

あるいは、value以外の属性値を利用するという方法もありますが、formの送信の際に値が送られないので、value値を利用する方が良いと思われます。

一方で、選択した値が必要であるならその内容を識別できるようにvalue値を設定しておくのが普通だと思われますので、ご提示のような設定方法は少々無理があるかも知れません。パックの種類を入力させるのであれば、その単価は別にテーブルで持っておいて、スクリプト側で換算するのが一般的ではないでしょうか？
それであれば、サーバー側にも単価テーブルがあれば、直接単価を送信する必要もなくなります。


まぁ、ご提示ようなマークアップのままで行いたいのであれば、HTMLからテキストなどを参照するという方法でもいけるかも…
例えば（識別するだけの例なので応用は適当にどうぞ）
文字数制限に引っかかるので、例は別に投稿します。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。すぐにお礼出来なく失礼いたしました。
私の技術レベルが低いので上手く出来るかどうか不安ですが、皆さんに教えて頂いた方法で試してみます。

通報する
お礼日時：2011/02/26 14:33

No.1

  • 回答者： luka3
  • 回答日時：

自分なら、



<INPUT type="hidden" name="選択パック" value="">

というのを用意して、

<LABEL><INPUT type="radio" name="本数" value="50" onclick="document.nForm.選択パック.value='3本'") /> 3本パック</LABEL>

というふうにやるかな。

合計の計算時に問題があれば、type="hidden"をチェックして計算対象外にすればいいと思います。

別な方法としては、送信ボタンを押した直後に関数を呼び出して、ラジオボタンの何番目を選択しているかを調べて、value値を金額から文字列に変えてPOSTされればいいですね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。すぐにお礼出来なく失礼いたしました。
私の技術レベルが低いので上手く出来るかどうか不安ですが、皆さんに教えて頂いた方法で試してみます。

通報する
お礼日時：2011/02/26 14:32

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報