前置き

2018/10/29 20:18

「inputボックスが多い」だけではイメージがわかないのですが、必ずname+連番の組み合わせなのでしょうか。法則性があるなら要件として追記いただきたいです。①も表示非表示を切り替えしているだけかと思いますが、「多い」ときにどのような法則で切り替えられるのかご提示ください。あとtype="textarea"というのはありません。type="text" もしくはinputタグではなくtextareaタグのどちらかです。（単行なら前者、複数行なら後者です）

2018/10/29 20:27

あと、コード内にコメントとはいえ要件にもあたる今回の質問●●の部分が入っていると要件がくみ取りにくくなります。コードブロック内はなるべく実際のコードのみにしてください。

2018/10/29 20:57

「値２つにつきカンマを１つ」というのは４つ５つと値が増えていった場合にどのような表示になるのでしょうか。結果を例示してください。

2018/10/30 02:57

失礼致しました。法則は仰る通りの連番で、ただし「data」も連番を付けたいです。コードのご指摘もありがとうございます。カンマについて質問を修正させて頂きました。

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

回答2件

前置き

エスパー回答かもしれないのでヒントにして改修してみてください。

要件（私自身が理解した仕様）

デフォルトで1セット入力エリアがある
入力エリアの結果を受ける送信エリアがある
「add data」ボタンで同じ入力エリアセットを入力エリア末尾に追加する

この場合、「末尾の入力エリアセットの番号＋１」を命名する
0. 「remove data」ボタンで末尾の入力エリアセットを削除する。
この際、デフォルトの入力エリアセットは残しておくため削除しない（削除ボタン非活性とか）
0. 何かしら入力された場合、すべての値を結合して「送信エリア」にそれぞれ表示
※「値２つにつきカンマを１つ」は値が増えた場合にどう表示するか提示されていないので考慮しない
※値が空になっている場合はどうするかは考慮していない（要件次第）

上記をなんとなく実現したコード

※ざっくり動作検証済みですが、どこかで不具合あるかもしれません。
その場合は、修正してみてください。

html
1<section class="datalist">
2  <p>【入力エリア】</p>
3  <div class="data">
4    <input id="name1" class="name" type="text" placeholder="りんご">
5    <input id="valu1" class="valu" type="number" placeholder="2">
6  </div>
7  <button type="button" id="add">add data</button>
8  <button type="button" id="remove" disabled>remove data</button>
9</section>
10
11<section class="outputlist">
12  <p>【送信エリア】</p>
13  <input id="result_name">
14  <input id="result_valu">
15</section>

js
1
2$(function(){
3    //入力セット追加
4    $("#add").on("click",function(){
5        var data_count = $(".data").length;
6
7        //蛇足：デフォルト入力セットがないとき
8        if(data_count <= 0){
9            alert("コピー元データが存在しません");
10            return false;
11        }
12        var next_inputset = $($(".data")[data_count-1]).clone();//最終の要素をコピー
13        var next_id = data_count+1;//個数＋１をIDとする
14        next_inputset.children("input.name").attr("id","name"+next_id);
15        next_inputset.children("input.name").val("");
16        next_inputset.children("input.valu").attr("id","valu"+next_id);
17        next_inputset.children("input.valu").val("");
18        $(".data")[data_count-1].after(next_inputset[0]);
19        //蛇足：ボタンの状態の切り替え
20        //削除ボタンを活性化
21        if(next_id == 2){
22            $("#remove").prop("disabled",false);
23        }
24    });
25    //入力セット削除
26    $("#remove").on("click",function(){
27        var data_count = $(".data").length;
28        //蛇足：1つもないとき
29        if(data_count <= 0){
30            alert("削除元データが存在しません");
31            return false;
32        }
33        //蛇足：1つしかないとき
34        if(data_count === 1){
35            alert("デフォルト入力セットは削除できません");
36            return false;
37        }
38        var last_inputset = $($(".data")[data_count-1]); //最終要素を取得
39        last_inputset.remove();
40        //蛇足：ボタンの状態の切り替え
41        if($(".data").length <= 1){
42            $("#remove").prop("disabled",true);
43        }
44        
45        //蛇足：現在の状態で送信エリアの値を精査
46        data_send("name");
47        data_send("valu");
48    });
49    
50    //入力値を結合
51    //動的生成要素に対応
52    $(document).on("keyup",".name",function(){
53        data_send("name");
54    });
55    $(document).on("keyup",".valu",function(){
56        data_send("valu");
57    });
58    
59    //送信共通メソッド
60    function data_send(vname){
61        var data_array = [];
62        for(var i=0;i<$("."+vname).length;i++){
63            data_array.push($($("."+vname)[i]).val());
64            //空の場合は考慮していない
65        }
66        $("#result_"+vname).val(data_array.join(","));
67    }
68});

追記

蛇足を沢山入れています。
個人的に考慮しといたほうがいいかなというところです。

投稿2018/10/29 22:57

編集2018/10/29 23:07

総合スコア80850

2018/10/30 03:01

どうもありがとうございます。蛇足のお気遣いまで完璧です。あとカンマについてですが、・文字の最後に連続で入ってしまとき →その最後のカンマを全て削除。・途中のカンマが連続するとき →送信ボタン（急きょ追加）をdisabledにする。というイメージでした。

2018/10/30 03:18

joinで連結してるので、空のときに追加しないように分岐かければ連続することなくなりますよ

・末尾にカンマが1個以上あるとき、これを削除

・連続したカンマを含む場合の対応

2018/10/30 04:25

なるほど。どうもありがとうございます。

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

ベストアンサー

こんにちは。

様々な修正方法や手順があると思いますので、あくまでその一例ということで、以下、回答します。なお、

JSだけではなく、HTMLとCSSもリファクタしました。
ファイル名を index.html, style.css, index.js としました。
動作確認のため、送信エリアの <input> の幅を広げました。

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Q155041</title>
6    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
7    <script src="index.js"></script>
8    <link rel="stylesheet" href="style.css">
9</head>
10<body>
11    <section class="data-list">
12        <p>【入力エリア】</p>
13        <div class="data-table">
14            <div class="data">
15                <input class="name" />
16                <input class="valu" type="number" />
17            </div>
18        </div>
19        <button type="button" id="add">add data</button>
20        <button type="button" id="remove">remove data</button>
21    </section>
22
23    <section class="output-list">
24        <p>【送信エリア】</p>
25        <input id="result-name" /><br />
26        <input id="result-valu" />
27    </section>
28</body>
29</html>

style.css

CSS
1p {
2    margin: 0px;
3}
4
5section {
6    border: 1px solid gray;
7    margin: 15px 0 0 0;
8    padding: 10px;
9}
10
11.data-list .data {
12    display: flex;
13}
14
15.data-list .data input {
16    width: 50px;
17    margin: 10px 2px;
18}
19
20.output-list input {
21    width: 95%;
22}

index.js

javascript
1$(function(){
2  /*
3  【入力エリア】を【送信エリア】にコピー
4  */
5  const updateResult = function(clazz) {
6    const values = $(`.${clazz}`).toArray().map(e => e.value);
7    $(`#result-${clazz}`).val(values.join(','));
8  };
9
10  const inputData = function() {
11    updateResult($(this).attr('class'));
12  };
13
14  $('.data input').on('keyup change', inputData);
15
16  /*
17  ボタンクリックで【入力エリア】の追加と削除
18  */
19  $('#add').click(function(){
20    // 一行目をクローン
21    const newData = $('.data:first-of-type').clone();
22
23    // input の値を初期化し、イベントハンドラ設定
24    $('input', newData)
25      .val('')
26      .on('keyup change', inputData);
27
28    // data-table に追加
29    $('.data-table').append(newData);
30  });
31
32  $('#remove').click(function(){
33    // データ行が2行以上あれば最後の行を削除し、送信エリアを更新
34    if ($('.data').length > 1) {
35      $('.data:last-child').remove();
36      ['name', 'valu'].forEach(clazz => updateResult(clazz));
37    }
38  });
39});

上記のコードを、以下の2カ所に上げていますので、ご参照ください。

・ jsfiddle: https://jsfiddle.net/jun68ykt/5uqfk8ba/2/

・ GitHub: https://github.com/jun68ykt/q155041

GitHubのほうで、initial commit では、ご質問に挙げられているコードをほぼそのまま写しただけなので、git clone するなりして頂き、全コミットを追っていけば、どんな修正をしていったかが分かるかと思います。

以上、参考になれば幸いです。

追記

ご質問に挙げられているソースコードのコメントに

質問➂：これではカンマが多くなってしまいます。「値２つにつきカンマを１つ」にしたいです。

とありましたが、

「値２つにつきカンマを１つ」にしたい

というのは、<input class="name" /> および<input class="valu" /> の value を、 class が"name"のものと"valu"のものとで分けて、カンマ区切りで並べたい、という意味と解釈して、そのように表示するようなコードを回答しています。
もし、回答に書いたコードが、上記の③含めて、parinpurin23さんがご要望の動作と違うものになっていましたら、コメントからお知らせください。

追記2

上記の回答に記載したコードから、コメントから頂きました、

parinpurin23 2018/10/30 12:05

ただし、次の２つの場合について
・文字の最後に連続で入ってしまとき
→その最後のカンマを全て削除。
・途中のカンマが連続するとき
→送信ボタン（急きょ追加）をdisabledにする。
というイメージでした。

に対応する修正の一例としては、関数updateResult を以下のようにします。

javascript
1  const updateResult = function(clazz) {
2    // 指定されたクラスの input.value をカンマ区切りにした文字列を作成
3    let csv = $(`.${clazz}`).toArray().map(e => e.value).join(',');
4
5    // 末尾にカンマが1個以上あるとき、これを削除
6    csv = csv.replace(/,+$/, '');
7
8    // 上記で作成されたカンマ区切りの文字列をvalueに設定し、あわせて連続したカンマがあるかどうかでdisabledを設定
9    $(`#result-${clazz}`)
10      .val(csv)
11      .prop('disabled', /,,/.test(csv));
12  };

GitHub のほうも上記の修正のための、以下の２コミットをプッシュしておきました。

後者のコミットでは、 disabled になったことが見て分かるように、 disabled の場合の背景色を #aaa にしました。

追記3

以下にて、disabled にする対象をsubmitボタンにするのと、先頭のカンマも削除するようにしました。

・submitボタンを追加し disabledにする対象を修正

・先頭のカンマも削除

git clone しているのでしたら、 pull してご確認ください。

投稿2018/10/29 20:55

編集2018/10/30 06:11

総合スコア9058

2018/10/30 03:05

ありがとうございます。カンマについてですが、おおむね仰る通りです。ただし、次の２つの場合について・文字の最後に連続で入ってしまとき →その最後のカンマを全て削除。・途中のカンマが連続するとき →送信ボタン（急きょ追加）をdisabledにする。というイメージでした。送信時に配列の形にして後でその配列を利用したいので、最後のカンマとかは無くしたのです。

2018/10/30 04:34

コメントありがとうございます。 > ただし、次の２つの場合についての件を対応する修正を、回答のほうの追記2 に記載しましたので、ご確認ください。それと、ふと思ったのですが、カンマ区切りの文字列にしたときに、先頭に１個以上のカンマがあるのは問題ないのでしょうか？

2018/10/30 04:41

すみません。ちょっと勘違いしていまして、追記2 の修正では、 input を disabled にしてしましたが、 disabledにするのは送信ボタンでしたね。修正しますので、少々お時間ください。

2018/10/30 04:44

先頭に１個以上のカンマがある？あ！たしかに！それもよろしくないですね…すみません。送信ボタンもお気遣いありがとうございます。