getパラメータの動的な追加・取得方法

2019/09/29修正追記　
ご指摘いただいたことをもとに、繰り返し部分に修正を加えました。
ローカルにhtmlファイル（jQuery/javascriptもhtml上に記述）を置き、chrome上で実行させてみました。
実行結果は、入力フォームが増えない状況です。
最新の修正内容は元のコードの下に記述しました。

htmlの入力フォームをjavascriptのrepeterを使って動的に付け加えることができるようしたいと考えています。
フォームの追加した中身をgetパラメータに動的に追加できるようにして、getパラメータを受け取る側でも表示を動的に変えられるようにしたいと考えておりますがうまくいきません。
うまくいかない部分はコメントで書いてあります。
具体的には変数に新たに付け加える形を繰り返すことで、実現したいと考えております。





### 該当のソースコード
以下入力フォーム追加とgetパラメータ作成
```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="入力フォーム付加">
<title>入力フォーム付加</title>
</head>
<body>
<h1>入力フォーム付加</h1>
 
<form action="demo.html" class="repeater">
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input type="text" name="fname" value="家族名"/>
      <input type="text" name="ninzu" value="人数"/>
      <input data-repeater-delete type="button" value="削除"/>
    </div>
  </div>
  <input data-repeater-create type="button" value="入力フォーム追加"/>
</form>
 
</body>
</html>

javascript
1/*repeaterを使い、入力フォームを追加*/
2$(document).ready(function () {
3  'use strict';
4  $('.repeater').repeater({
5    defaultValues: {
6      'fname': '家族名',
7      'ninzu': '人数',
8    }
9  });
10});
11
12/*以下getパラメータを作成しアドレスに不可*/
13 function send() {
14        var fname="";
15        var ninzu="";
16
17        if (document.form1.fname.value!=""){
18            name=escape(document.form1.fname.value);
19        }
20 
21        if (document.form1.ninzu.value!=""){
22            name=escape(document.form1.ninzu.value);
23        }
24        /* うまくいかない部分（パラメータにセット）2019/09/26修正*/
25　　　　    for(var i=0;i<arr.length;i++){
26        if((i+1)%2 == 1){
27          var param = "fname=" +arr[i]+"&";
28        }else{
29             param = "col4" + arr[i] + "&";  
30          }
31        }
32　　　　for(var i=0;i< ; i++){
33        var pram="&fname="+fname+"&ninzu="+ninzu;
34       }
35　　　　
36        location.href="/module/include/js/location4/sample2.html?"+pram;
37        return false;
38    }
39

以下getパラメータ取得側

HTML
1<!DOCTYPE html>
2<head>
3<title>seni</title>
4</head>
5<body>
6    <div class="seni">
7        家族名：<span class="fname">
8        </span>
9        <br> 人数：<span class="ninzu">
10        </span>
11        <br>
12    </div>
13

javascript
1function getUrlVars() {
2            var vars = [],
3                hash;
4            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
5            for (var i = 0; i < hashes.length; i++) {
6                hash = hashes[i].split('=');
7                vars.push(hash[0]);
8                vars[hash[0]] = hash[1];
9            }
10            return vars;
11        }
12
13        $(function () {
14            var queryString = getUrlVars();
15
16            // うまくいっていない部分（値を設定）2019/09/26修正
17　　　　　for(var j=0 ; j< ;j++){
18            $('.seni .fname').text(queryString.fname[j]);
19            $('.seni .ninzu').text(queryString.ninzu[j]);
20
21            //var text = [queryString.fname[j+1], queryString.ninzu[j+1]].join();
22            //2019/09/26修正
23            var arr = [];
24            $(function(){
25            $('#seni').each(function(){
26              text = $(this).text() + (i + 1);
27              arr.push(text);
28             });
29            });
30    
31         }
32
33        });

2019/09/29修正
変更点（getパラメータ取得側　javasscript jQuery側）
ご指摘いただいた箇所の修正とうまくいっていない部分の修正を加えました。
宜しくお願いします。
遷移元修正

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<meta name="description" content="入力フォーム付加">
6<title>入力フォーム付加</title>
7</head>
8<body>
9<h1>入力フォーム付加</h1>
10
11<form action="mtest.html" class="repeater">
12  <div data-repeater-list="group-a">
13    <div data-repeater-item>
14      <input type="text" name="fname" value="家族名" id=ritem/>
15      <input type="text" name="ninzu" value="人数"/>
16      <input data-repeater-delete type="button" value="削除"/>
17    </div>
18  </div>
19  <input data-repeater-create type="button" value="入力フォーム追加"/>
20</form>
21
22</body>

javascript
1/*repeaterを使い、入力フォームを追加*/
2$(document).ready(function () {
3  'use strict';
4  $('.repeater').repeater({
5    defaultValues: {
6      'fname': '家族名',
7      'ninzu': '人数',
8    }
9  });
10});
11
12/*以下getパラメータを作成しアドレスに付加*/
13 function send() {
14        var fname="";
15        var ninzu="";
16        
17/*入力フォームを動的に増減させた場合に対応してURLに付加するgetパラメータを配列を使い変数pramに格納*/
18        //一旦配列に格納
19        var arr= new Array();
20
21        $('#group-a ritem').each(function(i){
22            if (document.form1['group-a[i][fname]'].value!=""){
23            fname=encodeURIComponent(document.form1['group-a[i][fname]'].value);
24            }
25
26            if (document.form1['group-a[i][ninzu]'].value!=""){
27            ninzu=encodeURIComponent(document.form1['group-a[i][ninzu]'].value);
28            }
29            text = $(this).text();
30            arr.push(text);
31        });
32
33        /* arrに格納した要素を変数paramに文字列としてつなげる*/
34        var pram = "";
35        for(var j=0;j<arr.length;j++){
36        if((j+1)%2 == 1){
37          pram = "fname=" +arr[j] + "&";
38        }else{
39            //最後の要素であるかどうか判定し、最後であれば＆はつけない
40            if((j+1)!=arr.length){
41             pram = "ninzu" + arr[j] + "&";
42            }else{
43             pram = "ninzu" + arr[j];
44            }
45          }
46        }
47
48        location.href="/module/include/js/location4/sample2.html?"+pram;
49        return false;
50    }

遷移後修正※htmlについては変更なし

javascript
1function getUrlVars() {
2            var vars = [],
3                hash;
4            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
5            for (var i = 0; i < hashes.length; i++) {
6                hash = hashes[i].split('=');
7                vars.push(hash[0]);
8                vars[hash[0]] = hash[1];
9            }
10            return vars;
11        }
12/*以下2019/09/29修正　繰り返し部分家族名と人数を交互に配列arrに格納して、半角カンマで区切り、文字列text3にcsvとして格納*/
13        $(function () {
14            var queryString = getUrlVars();
15
16 　　　　var arr= new Array();
17         var text1 = "";
18         var text2 = "";
19         var text3 = "";
20        $('#group-a ritem').each(function(j){
21           if((j+1)%2==1){
22　　　　　　　text1 = $('.seni .fname').text(queryString.fname[j]);
23             arr.push(text1);
24           }else{
25             text2 = $('.seni .ninzu').text(queryString.ninzu[j]);
26             arr.push(text2);
27            }
28           text3 = [arr.fname[j]].join(',');
29        });
30 /*修正ここまで*/

よろしくご高覧いただきご回答お願いします。

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

回答1件

まず、フォームの値ですが、jQueryのrepeater（hkrgokさんはjavascriptの機能だと思われてるようですが、正しくはjQueryのプラグインです）を使うと、質問で貼られたソースの場合inputの値は次のように取得します

document.form1['group-a[インデックス][フィールド名]'].value

インデックスは何番目（0, 1, 2, ...）の入力欄かということを表し、フィールド名はinputのnameになります（fname, ninzu）

なので最初の家族名を取りたい場合は

document.form1['group-a[0][fname]'].value

となります。家族名と人数は次のように取得できます。

var name = document.form1['group-a[0][fname]'].value;
var ninzu = document.form1['group-a[0][ninzu]'].value

次にクエリパラメータの指定ですが、hkrgokさんのソースだと、例えば以下のようなURLにGETリクエストを送ることになります

/module/include/js/location4/sample2.html?&fname=田中&ninzu=4

クエリパラメータは ?key1=val1&key2=val2 の書式で書きます。なのでfnameの直前に&があるとクエリパラメータとして認識できません。param変数の冒頭に&が来ないように工夫してみてください。

おそらく初心者の方だと思うので、質問の本質とはずれますがいくつかアドバイスします。興味がなかったら以下は無視していただいて構いません。

クエリパラメータに追加する値をescape関数でエスケープしていますが、escape関数はエスケープが不十分であるため非推奨です。代わりにencodeURIComponent関数を使ってください
クエリパラメータ部分を取得するためにwindow.location.href.slice(window.location.href.indexOf('?') + 1) と書いていますがlocation.searchで取得できます。ただこの文字列には?も入ってくるのでlocation.search.slice(1)で２文字目以降を取得するようにしてください。
「うまくいかない部分」と書いていますが、どういう結果を期待していて実際はどうなったのか、を書くと回答する側もわかりやすいと思います

投稿2019/09/23 03:48