form（ラジオボタンとセレクトの連動をおこなったform）についてvalueがうまくかえってこない

お世話になります。formにおいて表題のような問題が起こって悩んでおります。

まずコードを下に記述させていただきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script languge="javascript">
function change(num){
var obj=document.getElementById('id1');
var data=new Array();
data[0]='<select name="select1"><option value="醤油ラーメン">醤油ラーメン<option value="味噌ラーメン">味噌ラーメン<option value="塩ラーメン">塩ラーメン<option value="とんこつラーメン">とんこつラーメン</select>';
data[1]='<select name="select1"><option value="もりそば">もりそば<option value="かき揚げそば">かき揚げ蕎麦<option value="カレー南蛮">カレー南蛮<option value="天ぷらそば">天ぷらそば</select>';
  data[2]='<select name="select1"><option value="チキンカレー">チキンカレー<option value="ビーフカレー">ビーフカレー<option value="ほうれん草カレー">ほうれん草カレー<option value="キーマカレー">キーマカレー</select>';
obj.innerHTML=data[num];
}
</script>
</head>
<body>
<form name="FORM1">
<input type="radio" name="radio1" value="0" id="r1" checked onclick="change(this.value)"><label for="r1">ラーメン</label>
<input type="radio" name="radio1" value="1" id="r2" onclick="change(this.value)"><label for="r2">蕎麦</label>
<input type="radio" name="radio1" value="2" id="r3" onclick="change(this.value)"><label for="r3">カレーライス</label><br>
<span id="id1">
<select name="select1">
<option value="醤油ラーメン">醤油ラーメン</option>
<option value="味噌ラーメン">味噌ラーメン</option>
<option value="塩ラーメン">塩ラーメン</option>
<option value="とんこつラーメン">とんこつラーメン</option>
</select>
</span>
<input type=submit value="send">
</form>
</body>
</html>

Web上ではうまく表現され、ラジオボタンの選択に応じたselectの連動が行われてはおりますが、メールを送信すると

<input type="radio" name="radio1" value="0"・・・

に問題があると思うのですがフォーム内容を受信すると本来ラーメン、蕎麦、カレーライスと値を返したいところが0,1.2と帰ってきます。
valueの値をラーメンなどに変える、変更したあとに

data[0]='

の0に同じラーメンなど入力するとundefineとエラーが返されます。
JavaScriptについて全く初心者なのでお恥ずかしいのですが、フォーム内容受信内容を

■メニュー 0
■コース詳細醤油ラーメン

ではなく

■メニューラーメン
■コース詳細醤油ラーメン

このように値を返すにはどのようにしたらいいのでしょうか？
初心者の為、恐れ入りますが噛み砕いてお知らせいただけますとありがたいです。
どうぞよろしくお願いします。

行動規範の内容に同意します

回答2件

form でメールを送信する場合は、 yomomimi さんも薄々感じていらっしゃるとおり、valueに設定されている値が送信されます。
よって、 value を送信したい値に変更し、それでうまく動作するように js を変更してあげれば良いでしょう。

こんな感じで:

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8" />
5  <title>Document</title>
6  <script languge="javascript">
7function change(foodKind){
8var obj=document.getElementById('id1');
9var data={
10    'ラーメン':'<select name="select1"><option value="醤油ラーメン">醤油ラーメン<option value="味噌ラーメン">味噌ラーメン<option value="塩ラーメン">塩ラーメン<option value="とんこつラーメン">とんこつラーメン</select>',
11    '蕎麦':'<select name="select1"><option value="もりそば">もりそば<option value="かき揚げそば">かき揚げ蕎麦<option value="カレー南蛮">カレー南蛮<option value="天ぷらそば">天ぷらそば</select>',
12    'カレーライス':'<select name="select1"><option value="チキンカレー">チキンカレー<option value="ビーフカレー">ビーフカレー<option value="ほうれん草カレー">ほうれん草カレー<option value="キーマカレー">キーマカレー</select>'
13};
14obj.innerHTML=data[foodKind];
15}
16</script>
17</head>
18<body>
19<form name="FORM1">
20<input type="radio" name="radio1" value="ラーメン" id="r1" checked onclick="change(this.value)"><label for="r1">ラーメン</label>
21<input type="radio" name="radio1" value="蕎麦" id="r2" onclick="change(this.value)"><label for="r2">蕎麦</label>
22<input type="radio" name="radio1" value="カレーライス" id="r3" onclick="change(this.value)"><label for="r3">カレーライス</label><br>
23<span id="id1">
24<select name="select1">
25<option value="醤油ラーメン">醤油ラーメン</option>
26<option value="味噌ラーメン">味噌ラーメン</option>
27<option value="塩ラーメン">塩ラーメン</option>
28<option value="とんこつラーメン">とんこつラーメン</option>
29</select>
30</span>
31<input type=submit value="send">
32</form>
33</body>
34</html>

配列を連想配列に変更し、食べ物の種別をキーにしてみました。

追記です。

html を js の中の文字列に埋め込んでいるのが気に食わなかったので、改変しました↓

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8" />
5  <title>Document</title>
6  <script languge="javascript">
7    var foodKinds = ['ラーメン', '蕎麦', 'カレーライス'];
8    function change(selectedFoodKind) {
9        for (var foodKind of foodKinds) {
10            var targetElm = document.getElementById(foodKind);
11            targetElm.disabled = selectedFoodKind !== foodKind;
12            targetElm.style    = selectedFoodKind === foodKind ? "display:inline" : "display:none";
13        }
14    }
15  </script>
16</head>
17<body>
18<form name="FORM1">
19
20<div>
21    <input type="radio" name="radio1" value="ラーメン" id="r1" checked onclick="change(this.value)"><label for="r1">ラーメン</label>
22    <input type="radio" name="radio1" value="蕎麦" id="r2" onclick="change(this.value)"><label for="r2">蕎麦</label>
23    <input type="radio" name="radio1" value="カレーライス" id="r3" onclick="change(this.value)"><label for="r3">カレーライス</label><br>
24</div>
25
26<select id="ラーメン" name="select1">
27    <option value="醤油ラーメン">醤油ラーメン</option>
28    <option value="味噌ラーメン">味噌ラーメン</option>
29    <option value="塩ラーメン">塩ラーメン</option>
30    <option value="とんこつラーメン">とんこつラーメン</option>
31</select>
32
33<select id="蕎麦" name="select2" style='display:none' disabled>
34    <option value="もりそば">もりそば</option>
35    <option value="かき揚げそば">かき揚げ蕎麦</option>
36    <option value="カレー南蛮">カレー南蛮</option>
37    <option value="天ぷらそば">天ぷらそば</option>
38</select>
39
40<select id="カレーライス" name="select3" style='display:none' disabled>
41    <option value="チキンカレー">チキンカレー</option>
42    <option value="ビーフカレー">ビーフカレー</option>
43    <option value="ほうれん草カレー">ほうれん草カレー</option>
44    <option value="キーマカレー">キーマカレー</option>
45</select>
46
47<input type=submit value="send">
48</form>
49</body>
50</html>

投稿2017/05/09 17:23

編集2017/05/10 02:35

morisoba

総合スコア90

yomomimi104snow

2017/05/10 08:41

ご丁寧なご回答ありがとうございます。配列やjsの詳細までお伝えいただいて感謝いたしております。ご回答を寄せていただいて「JavaScript」をしっかり勉強しようと改めて思いました。

行動規範の内容に同意します

ベストアンサー

これでどう？

HTML
1<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8" />
2	<title>Document</title>
3	<script>
4	function change(val){
5		var num = 0;
6		if ( val === '蕎麦' ) {
7			num = 1;
8		} else if ( val === 'カレーライス' ) {
9			num = 2;
10		}
11		var obj=document.getElementById('id1');
12		var data=new Array();
13		data[0]='<select name="select1"><option value="醤油ラーメン">醤油ラーメン<option value="味噌ラーメン">味噌ラーメン<option value="塩ラーメン">塩ラーメン<option value="とんこつラーメン">とんこつラーメン</select>';
14		data[1]='<select name="select1"><option value="もりそば">もりそば<option value="かき揚げそば">かき揚げ蕎麦<option value="カレー南蛮">カレー南蛮<option value="天ぷらそば">天ぷらそば</select>';
15		data[2]='<select name="select1"><option value="チキンカレー">チキンカレー<option value="ビーフカレー">ビーフカレー<option value="ほうれん草カレー">ほうれん草カレー<option value="キーマカレー">キーマカレー</select>';
16		obj.innerHTML=data[num];
17	}
18	</script>
19</head><body>
20<form name="FORM1">
21	<input type="radio" name="radio1" value="ラーメン" id="r1" checked onclick="change(this.value)"><label for="r1">ラーメン</label>
22	<input type="radio" name="radio1" value="蕎麦" id="r2" onclick="change(this.value)"><label for="r2">蕎麦</label>
23	<input type="radio" name="radio1" value="カレーライス" id="r3" onclick="change(this.value)"><label for="r3">カレーライス</label>
24	<br>
25	<span id="id1">
26		<select name="select1">
27			<option value="醤油ラーメン">醤油ラーメン</option>
28			<option value="味噌ラーメン">味噌ラーメン</option>
29			<option value="塩ラーメン">塩ラーメン</option>
30			<option value="とんこつラーメン">とんこつラーメン</option>
31		</select>
32	</span>
33	<input type=submit value="send">
34</form>
35</body></html>