質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3801閲覧

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

Otazoman

総合スコア44

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/03/10 08:32

編集2018/03/10 08:48

前提・実現したいこと

参考:下記の画面

イメージ説明

リストボックスとラジオボックスが混在しており
「検索」ボタンを押すとリストボックスで選択された値と
ラジオボックスで選択された値を取得し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"> bbbb </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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/03/10 08:36

HTMLも追記してください。
guest

回答2

0

ベストアンサー

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"> bbbb </label> <br> </li> </div> </ul> </form> </div>
defghi1977

2018/03/11 05:25

FireFox/Chromeでは正しく動作しましたがIE11での確認はしていませんでした. jQueryを使った別解(おそらく内部的な処理は同一)を掲載しましたので試してみて下さい.
Otazoman

2018/03/11 07:37

早速のご回答ありがとうございました。 たった1行で、実現できました。 もっと、修業が必要だと実感した次第です。 本当にありがとうございました。
guest

0

IDは同じnameのラジオボタンであっても同じIDを指定してはいけません。
javascriptなどで動的に生成する場合は違うIDを指定するようにしてください。
labelもID被ってるので調整してください。

投稿2018/03/10 09:15

編集2018/03/10 09:17
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Otazoman

2018/03/11 03:29

ありがとうございます。idについては重複しないようにHTML修正いたしました。 idは一意という初歩的なことさえ理解できておりませんでした。お恥ずかしい限りです。 今後ともよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問