ラジオボックスの値が二重に取得されてしまう。

前提・実現したいこと

参考：下記の画面

リストボックスとラジオボックスが混在しており
「検索」ボタンを押すとリストボックスで選択された値と
ラジオボックスで選択された値を取得しJson形式で返す
ということをしたいと考えております。

発生している問題・エラーメッセージ

汎用的に使用したいのでid値やname値は決め打ちではなく
変数を使用した形で取得したいと考えております。
リストボックスとラジオボックスの値は取得できるのですが
ラジオボックスの値がラジオボックスの要素数分
出力されてしまっています。

panel17の箇所がそれにあたります。

[{"panel_16":"1000,"panel_17":"1"panel_17":"1}]

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5    <script type="text/javascript" src="js/dataop.js"></script>
6    <script type="text/javascript" src="js/getParam.js"></script>
7    <script type="text/javascript" src="js/search.js"></script>
8    <link href="css/design.css" rel="stylesheet" type="text/css">
9    <title>サンプル</title>
10</head>
11<body>
12  <div id = "SearchPanel"></div><br>
13  <input type="button" id ="select_search" value="検索">
14</body>
15</html>

HTMLではJavaScriptから

引用テキスト<div id = "SearchPanel"></div>

の箇所に以下を出力しております。

<div id="SearchPanel">
	<ul class="container">
		<div class="sh_panel">
			<li>
				<strong>その他OP2</strong><br>
				<select name="panel_16" id="s_panel_16" style="width: 150px; font-size: 20px;">
				<option value="select0">選択してください</option>
				<option value="1000" selected="">1000</option>
				<option value="2000">2000</option>
				<option value="3000">3000</option>
				<option value="4000">4000</option>
				<option value="5000">5000</option>
				<option value="6000">6000</option>
				<option value="7000">7000</option>
				<option value="8000">8000</option>
				<option value="9000">9000</option>
				<option value="10000">10000</option>
				</select>
			</li>
		</div>
		<div class="sh_panel">
			<li>
				<strong>あああああ</strong><br>
				<label id="panel_17"><
				input name="panel_17" id="s_panel_17" type="radio" checked="" value="1">
				aaaa
				</label>
				<br>
				<label id="panel_17">
				<input name="panel_17" id="s_panel_17" type="radio" value="2">
				ｂｂｂｂ
				</label>
				<br>
			</li>
		</div>
	</ul>
</div>

検索ボタンをクリックすると下記を呼び出して動く仕組みと
なっております。

JavaScript
1function getSpanelParam(){
2        var size = document.getElementById("SearchPanel").getElementsByTagName("li").length;
3	var rJson = '[{';
4	var i = 0;
5	$('[id^="s_panel_"]').each(function(){
6			var $this = $(this);
7			var $type = ($this).attr('type');
8			var panelName = ($this).attr('id');
9			var panelName = panelName.slice( 2 );	//nameとしてはs_不要なので先頭のs_を削除する。
10			var val;
11			//ラジオボタンとチェックボックスの時の処理
12			if ($type == 'radio' || $type == 'checkbox'){
13				var elements = document.getElementsByName(panelName);
14				for ( val="", j=elements.length; j--; ) {
15					if ( elements[j].checked ) {
16						val = elements[j].value ;
17						break ;
18					}
19				}
20
21				if ( val !== "" ) {
22					rJson = rJson + '"' + panelName + '":' + '"' + val ;
23				}
24				i= i + 1;
25				return true;
26			}else{
27			//セレクトボックス時の処理
28				val = ($this).val();
29				rJson = rJson + '"' + panelName + '":' + '"' + val 
30				i= i + 1;
31			}
32			if (i == size -1){
33			        rJson = rJson + '"';
34			    }else{
35			        rJson = rJson + ',';
36			}
37		}
38	  )
39	rJson = rJson + '}]';
40	console.log(rJson);
41	return rJson;
42}

試したこと

return true

25行目の上記の位置を色々と操作してみても二重に出力されてしまいます。
また、64行目に前のpanelNameと同じ値であれば次のレコードへと
するようなロジックを埋め込もうとしたのですが、どういうロジックを
書けばいいのか思い当たりません。

すいませんがお知恵を拝借できればと思い投稿いたしました。
ぜひよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

JQUERY3.2.1
IE11

m.ts10806

2018/03/10 08:36

HTMLも追記してください。

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

回答2件

ベストアンサー

input要素の抽出やJSONの生成まで自作するのはテストがしんどい気がします.
なので, form要素を使った代替案を考えました.

対処策・その1

下記ではform要素の「フォームデータ」(つまり, あるノードに含まれるinput要素群の状態)をJSON化しています.
(同名のラジオボタンを単一のRadioNodeListオブジェクトに勝手にまとめてくれるので処理がシンプル)

HTML
1<form id="form">
2	<input type="text" name="txt" value="あああ"/>
3	<input type="checkbox" name="chk" checked="false"/>
4	<input type="radio" name="rdo" value="0"/>
5	<input type="radio" name="rdo" value="1"/>
6	<select name="sel">
7		<option value="1">1</option>
8		<option value="2">2</option>
9	</select>
10</form>
11<button id="convert">form2json</button>

JavaScript
1convert.onclick = e => {
2	//JSON化対象のオブジェクト
3	const obj = {};
4	//form要素配下のinput要素のリスト
5	const elems = form.elements;
6	for(let i = 0, len = elems.length; i<len; i++){
7		const elem = elems[i];
8		//nameで検索
9		const name = elem.name;
10		const named = form[name];
11		//オブジェクトに名前と値を挿入
12		obj[name] = named.type == "checkbox" ? named.checked : named.value;
13	}
14	//オブジェクトをJSON化
15	const json = JSON.stringify(obj);
16	console.log(json);
17}

得られる結果の例

JSON
1{"txt":"aaaa","chk":true,"rdo":"1","sel":"1"}

NOTE:
とは言え, name属性のとり方(誤った重複)などによってはうまく動きません.

対処策・その2

jQueryのserializeArrayメソッドを使う方法もあるようです.

参考:
https://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data

JavaScript
1var formData = JSON.stringify($("#search_detail_panel").serializeArray());
2console.log(formData);

これを実行すると次のようなJSONが得られます.

JSON
1[{"name":"panel_16","value":"3000"},{"name":"panel_17","value":"1"}]

最終的なJSONの形状があなたの求めている形と異なりますが, ここまでくれば後はデータの加工だけで済むでしょう.

投稿2018/03/10 09:50

編集2018/03/11 05:23

defghi1977

総合スコア4756

Otazoman

2018/03/11 04:55 編集

ご回答ありがとうございます。こちらの方がコードが見やすくなると思い早速、使わせていただきましたがセレクトボックスの値しか取得できませんでした。 nameが重複しているpanel_17の箇所のラジオボックスの値がまったく取ってこれていませんでした。panel_17についてはいずれか片方の値を取得したいので同じnameとなっています。何かやり方がまずかったのでしょうか。すいませんが、ご教示いただけるとありがたいです。 <div id="SearchPanel"> <form id="search_detail_panel"> <ul class="pan_container"> <select name="panel_16" id="panel_16" style="width: 150px; font-size: 20px;"> <option value="select0">選択してください</option> <option value="1000" selected="">1000</option> <option value="2000">2000</option> <option value="3000">3000</option> <option value="4000">4000</option> <option value="5000">5000</option> <option value="6000">6000</option> <option value="7000">7000</option> <option value="8000">8000</option> <option value="9000">9000</option> <option value="10000">10000</option> </select> </li> </div> <div class="search_panel"> <li> <strong>あああああ</strong><br> <label> <input name="panel_17" id="panel_171" type="radio" checked="" value="1"> aaaa </label><br> <label> <input name="panel_17" id="panel_172" type="radio" value="2"> ｂｂｂｂ </label> <br> </li> </div> </ul> </form> </div>