前提

都合により、PHPなどは使用できないため
Javascreiptのみで解決したいです。

実現したいこと

複数のチェックボックスの値を取得し、
下記のようにURLパラメータとして連結させ、
送信ボタン（input submit）クリックで
連結させたURLにリンクさせたいです。
「（URL）?1+2+3+4+5+6」

調査したこと・試したこと

▼参考）チェックボックスで選択した値をパラメータとしてURLに表示する
http://note.favorite-color.net/2017/201712271293/

上記の参考サイトの場合、
URL末尾のパラメータは
input内のnameとvalueを連結させています。
例）
「（URL）?hoge=2&fuga=2&fuga=3」

この連結表記を
単純にinput内のIDのみで繋げて
↓のようにしたいですが方法がわかりません。
例）
「（URL）?1+2+3+4+5+6」

また、参考サイトのソースだと、
「&」で連結させていますが、
これを「+」に変更したいのですが
こちらもやり方がわからず、困っています。。

JSは初級レベルです。
色々調べてるのですがうまくいきません。
他に良い方法などありましたら、
どなたかご教示いただけないでしょうか。

よろしくお願いいたします。

該当のソースコード

------------------↓HTML

------------------↓JS（「name」の部分を「id」に変えてもうまくいきませんでした）

m.ts10806

2022/10/05 22:08 編集

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 idの命名（数値始まり）やnameが不適当（配列にならない）な気もしますが、そもそもそのようにして何にどう使いたいのでしょう。単に連結させたところで、リクエスト取得先がどのように取得しているかの形に見合ってなければ意味がないと思うのですが。

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

回答1件

ベストアンサー

javascript
1<script>
2window.addEventListener('formdata', (e)=>{
3  const fd=e.formData;
4  const hogedata=fd.getAll('hoge');
5  fd.delete('hoge');
6  if(hogedata.length) fd.append('hoge',hogedata.join(' '));
7});
8</script>
9<form method="get">
10<label><input type="checkbox" name="hoge" value="1">hoge1<label>
11<label><input type="checkbox" name="hoge" value="2">hoge2<label>
12<label><input type="checkbox" name="hoge" value="3">hoge3<label>
13<label><input type="checkbox" name="hoge" value="4">hoge4<label>
14<label><input type="checkbox" name="hoge" value="5">hoge5<label>
15<label><input type="checkbox" name="hoge" value="6">hoge6<label>
16<input type="submit" value="送信" />
17</form>

複数パラメータ対応

hoge/fugaの2つの要素を取得する方法です。
listの要素を増やせばいくつでも指定できるはずです。

javascript
1<script>
2window.addEventListener('formdata', (e)=>{
3  const fd=e.formData;
4  const list=["hoge","fuga"];
5  list.forEach(x=>{
6    const data=fd.getAll(x);
7    fd.delete(x);
8    if(data.length) fd.append(x,data.join(' '));
9  });
10});
11</script>
12<form method="get">
13<label><input type="checkbox" name="hoge" value="1">hoge1<label>
14<label><input type="checkbox" name="hoge" value="2">hoge2<label>
15<label><input type="checkbox" name="hoge" value="3">hoge3<label>
16<label><input type="checkbox" name="fuga" value="4">fuga4<label>
17<label><input type="checkbox" name="fuga" value="5">fuga5<label>
18<label><input type="checkbox" name="fuga" value="6">fuga6<label>
19<input type="submit" value="送信" />
20</form>

非推奨：IE対応版

※微調整

javascript
1<script>
2document.addEventListener('submit', function(e){
3  e.preventDefault();
4  var f1=e.target;
5  var f2=document.querySelector('#f2');
6  if(f2){
7    f2.parentNode.removeChild(f2);
8  }
9  f2=document.createElement('form');
10  f2.id="f2";
11  f2.hidden=true;
12  f2.target=f1.target;
13  f2.action=f1.action;
14  f2.hidden=true;
15  var list=["hoge","fuga"];
16  list.forEach(function(x){
17    var ele=document.createElement('input');
18    ele.name=x;
19    ele.value=[].filter.call(f1,function(y){return y.name==x && y.checked;}).map(function(x){return x.value}).join(' ');
20    f2.appendChild(ele);
21  });
22  document.body.appendChild(f2);
23  f2.submit();
24});
25</script>
26<form name="form1" method="get" action="https://test.co.jp/" target="_blank">
27<label><input type="checkbox" name="hoge" value="1">hoge1<label>
28<label><input type="checkbox" name="hoge" value="2">hoge2<label>
29<label><input type="checkbox" name="hoge" value="3">hoge3<label>
30<label><input type="checkbox" name="fuga" value="4">fuga4<label>
31<label><input type="checkbox" name="fuga" value="5">fuga5<label>
32<label><input type="checkbox" name="fuga" value="6">fuga6<label>
33<input type="submit" value="送信">
34</form>

投稿2022/10/06 00:24

編集2022/10/28 06:04

yambejp

総合スコア114968

yambejp

2022/10/06 02:56 編集

idをつなげるという発想は現実的ではありませんvalue値を前提に調整してくださいまたパラメータなしの「?1+2+3・・」的なURLはやめたほうがよいでしょう

yuyuyuyuyuyuyu

2022/10/06 03:27

ご回答ありがとうございます！ご指摘の通りにすると、上手くいきました！また、当初の質問と異なり恐縮ですが、例えば、「（URL）?hoge=1+2+3&fuga=1+2+3」のように、「hoge」と「fuga」で分けてそれぞれ連結させることは可能なのでしょうか？

yuyuyuyuyuyuyu

2022/10/06 03:44

yambejpさま「複数パラメータ対応」の件もうまくいきました！！ご返信も早く凄すぎです！！本当にありがとうございました！こちらをベストアンサーとさせていただきます。

yuyuyuyuyuyuyu

2022/10/13 04:07

度々すみません。既存のパラメータがURL末尾に存在する場合、「複数パラメータ対応」の方法を使用すると、既存パラメータが消えてしまうのですが、消えない方法などありましたら、教えていただけないでしょうか。例）「hoge1」と「fuga4」をチェックした場合、「http://sample/?z=1&hoge=1&fuga=4」としたいです。（「z=1」は既存パラメータ）ですが、↓のように既存パラメータ「z=1」が消えてしまいます。 http://sample/?hoge=1&fuga=4 --------------------↓試したソース <script> window.addEventListener('formdata', (e)=>{ const fd=e.formData; const list=["hoge","fuga"]; list.forEach(x=>{ const data=fd.getAll(x); fd.delete(x); if(data.length) fd.append(x,data.join(' ')); }); }); </script> <form method="get" action="http://sample/?z=1&"> <label><input type="checkbox" name="hoge" value="1">hoge1<label> <label><input type="checkbox" name="hoge" value="2">hoge2<label> <label><input type="checkbox" name="hoge" value="3">hoge3<label> <label><input type="checkbox" name="fuga" value="4">fuga4<label> <label><input type="checkbox" name="fuga" value="5">fuga5<label> <label><input type="checkbox" name="fuga" value="6">fuga6<label> <input type="submit" value="送信" /> </form> --------------------

yuyuyuyuyuyuyu

2022/10/13 05:19

【続き】「複数パラメータ対応」の方法に、「z」をリストに追加し、ブラウザには表示されない下記の要素を置いてみたところ、 <input type="hidden" name="z" value="1"> ↓狙い通りのURLになったのですが、例）http://sample/?z=1&hoge=1&fuga=4 上記ですと、既存パラメータ「z=1」のデータが送信されてしまうと思います。こちらを送信されないようにする方法等ございますでしょうか？お手数をおかけしますが、よろしくお願いいたします。 ----------------------↓試したソース <script> window.addEventListener('formdata', (e)=>{ const fd=e.formData; const list=["z","hoge","fuga"]; list.forEach(x=>{ const data=fd.getAll(x); fd.delete(x); if(data.length) fd.append(x,data.join(' ')); }); }); </script> <form method="get" action="http://sample/?" target="_blank"> <input type="hidden" name="z" value="1"> <label><input type="checkbox" name="hoge" value="1">hoge1<label> <label><input type="checkbox" name="hoge" value="2">hoge2<label> <label><input type="checkbox" name="hoge" value="3">hoge3<label> <label><input type="checkbox" name="fuga" value="4">fuga4<label> <label><input type="checkbox" name="fuga" value="5">fuga5<label> <label><input type="checkbox" name="fuga" value="6">fuga6<label> <input type="submit" value="送信" /> </form>

yambejp

2022/10/13 06:15

ちょっと状況がわかりません name=zを要素にもっているのに送信したくないのですか？であれば使わないzなんて設定しなければ済むだけでは？すくなくともlistに入れる必要はありません。どうしてもjsでzを削除したいなら fd.delete("z"); を適当なところに記載するだけでも行けると思います

yuyuyuyuyuyuyu

2022/10/13 15:30

お返事ありがとうございます！複数のチェックボックスを置く似たページが２ページあり、パラメータはそれぞれページ毎に「z=1」「z=2」で予め振り分けてあり、固定でチェックボックスのパラメータの前に置く必要がありました。わかりづらくてすみません。いただいたアドバイス通り、zはlistに入れないにして対応してみます。

yuyuyuyuyuyuyu

2022/10/28 02:37

yambejpさま何度もすみません。教えていただいたソースをIE11で試したところ、例）「hoge1」「hoge2」「fuga4」「fuga5」にチェックした場合 http://sample/?hoge=1+2&fuga=4+5 ↑となるはずですが、下記のように「+」連結がなくなってしまいます。 http://sample/?hoge=1&hoge=2&fuga=4&fuga=5 下記ソースでは昔の書き方の「function」を追記してみたのですが、結果変わらずです。 IE自体もうサポート終了しているのに恐縮ですが、何か方法ありましたら、ご教示いただけないでしょうか。よろしくお願いいたします。 ------------------↓試したソース <script> window.addEventListener('formdata', function(e) { // window.addEventListener('formdata', (e) => { const fd = e.formData; const list = ["hoge", "fuga"]; list.forEach(function(x) { // list.forEach(x => { const data = fd.getAll(x); fd.delete(x); if (data.length) fd.append(x, data.join(' ')); }); }); </script> <form method="get"> <label><input type="checkbox" name="hoge" value="1">hoge1<label> <label><input type="checkbox" name="hoge" value="2">hoge2<label> <label><input type="checkbox" name="hoge" value="3">hoge3<label> <label><input type="checkbox" name="fuga" value="4">fuga4<label> <label><input type="checkbox" name="fuga" value="5">fuga5<label> <label><input type="checkbox" name="fuga" value="6">fuga6<label> <input type="submit" value="送信" /> </form>

yambejp

2022/10/28 03:37

IEではあらゆる意味で動作しないですねいまやIEを使うかぎり自己責任なのでスキルが伴わない場合「できない」と考えるべきです

yuyuyuyuyuyuyu

2022/10/28 04:05

yambejpさまご回答ありがとうございます。 IEでは動作しないとのこと、承知しました。 IEが無理な根拠としてはどのようなことがあるでしょうか？今後の勉強のためにもし良ければ教えていただけますと幸いです。よろしくお願いいたします。

yambejp

2022/10/28 04:08

一応参考スクリプトだけ付けておきました。 IEにはモダンなJSの基本的な機能が足りていません。

yuyuyuyuyuyuyu

2022/10/28 05:59 編集

yambejpさま > IEにはモダンなJSの基本的な機能が足りていません。なるほど、そういうことなんですね！ IE対応版の件も、ありがとうございます！ちなみに、外部サイトの別窓に飛ばして URL末尾にパラメータ付与する際はどのようにするかご存じでしょうか？下記のように、 <form>に「target="_blank"」を指定たり、送信ボタンに別窓指定してもうまくいかず別窓が真っ白になってしまいます。。 ------------------↓試したソース <script> document.addEventListener('submit', function(e){ e.preventDefault(); var f1=e.target; var f2=document.querySelector('#f2'); if(f2){ f2.parentNode.removeChild(f2); } f2=document.createElement('form'); f2.id="f2"; f2.hidden=true; var list=["hoge","fuga"]; list.forEach(function(x){ var ele=document.createElement('input'); ele.name=x; ele.value=[].filter.call(f1,function(y){return y.name==x && y.checked;}).map(function(x){return x.value}).join(' '); f2.appendChild(ele); }); document.body.appendChild(f2); f2.submit(); }); //送信ボタン押下で別窓で開く function post_open() { window.open('', 'new_window'); document.form1.action = 'https://test.co.jp/'; document.form1.method = 'POST'; document.form1.target = 'new_window'; document.form1.submit(); } </script> <form name="form1" method="get" action="https://test.co.jp/" target="_blank"> <label><input type="checkbox" name="hoge" value="1">hoge1<label> <label><input type="checkbox" name="hoge" value="2">hoge2<label> <label><input type="checkbox" name="hoge" value="3">hoge3<label> <label><input type="checkbox" name="fuga" value="4">fuga4<label> <label><input type="checkbox" name="fuga" value="5">fuga5<label> <label><input type="checkbox" name="fuga" value="6">fuga6<label> <input type="submit" value="送信" onclick="post_open();" /> </form>

yambejp

2022/10/28 06:05

非推奨版を調整しておきました（あくまでも非推奨ですのでお間違いなく）

yuyuyuyuyuyuyu

2022/10/28 13:12

お返事遅くなってすみません。無事解決しました！本当にありがとうございました！

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