divから値を抽出して配列に保存する - JSFindle指定の

Question

ユーザーがadd a rowボタンをクリックすると、usernameとpasswordというテキストフィールドのペアがjsfiddle link belowのように表示されます。 ボタンをクリックしてフォームを送信すると、ユーザー名とパスワードのペアを抽出し、配列に（キーと値のペアとして）保存します。そのため、1つの配列に1つまたは複数のユーザー名とパスワードのペアを保存できます。

どうすればいいですか？これまでの私の仕事はjsfiddle hereにあります。

注：私はすでに配列にして、ユーザ名とパスワードを保存する方法を知っている：

var dict = {}; 

dict['username'] = "password"; 

Answer 1

クローンで新しい要素を作成するとき、一意でなければならないので、IDを変更するのを忘れてしまいます。さらに、値をリセットすることを忘れてしまいます。

あなたが次のスニペットのような問題に対処することができるパスワードフィールドにIDを追加する場合：

$(document).ready(function() { 
 
    var counter = 1; 
 
    $("#btn").click(function() { 
 
    counter++; //Increase counter 
 
    var clonedBox = $('.input-group').eq(0).clone(); 
 
    clonedBox.find('input').attr('id', function(index, attr) { 
 
     return attr + (counter - 1); 
 
    }).val(''); 
 
    $("#boxid").append(clonedBox); 
 
    $("#boxid .countid").last().text('UserId'+counter); 
 

 
    clonedBox = $('.input-group').eq(1).clone(); 
 
    clonedBox.find('input').attr('id', function(index, attr) { 
 
     return attr + (counter - 1); 
 
    }).val(''); 
 
    $("#boxid").append(clonedBox); 
 
    }); 
 

 
    // WHEN CLICKED ON SUBMIT RETRIEVE ALL DATA\\ 
 
    $("#target").submit(function(event) { 
 
    //alert("Handler for .submit() called."); 
 

 
    var dict = {}; 
 

 
    $('#target input[id^="myid"]').each(function(i, e) { 
 
     dict[this.value] = $('#mypwdid' + ((i == 0) ? '' : i)).val(); 
 
    }) 
 

 
    console.log('Fields '+ JSON.stringify(dict)); 
 

 

 

 

 
    event.preventDefault(); 
 
    }); 
 

 
});

.input-group{ 
 
    margin-bottom: 1em; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<button id="btn">Add row</button> 
 
<form id="target" method="POST"> 
 
    <div id="boxid"> 
 
     <div id="boxcontainerid" class="form-group"> 
 
      <div class="input-group"> 
 
       <div class="countid input-group-addon">UserId</div> 
 
       <input type="text" class="form-control" id="myid" placeholder="username" name="1"> 
 
       <div class="input-group-addon">?</div> 
 
      </div> 
 

 
      <div class="input-group"> 
 
       <div class="input-group-addon">Password</div> 
 
       <input type="text" class="form-control" name="pwd" id="mypwdid" placeholder="password"> 
 
      </div> 
 
      <hr> 
 
     </div> 
 

 
    </div> 
 
    <button>send</button> 
 
</form>

Answer 2

dictオブジェクトは、新しいキー/値ペアの任意の番号を受信することができます。ここで

は、このスニペットとして、 fiddleを更新している：あなたがHTMLでの重複 id属性値を持つことができません

$(document).ready(function() { 
 
    var counter = 1; 
 
    $("#btn").click(function() { 
 
    counter++; //Increase counter 
 
    $('.input-group').clone().appendTo("#boxid").find(':text').val(''); 
 
    $("#boxid .countid").last().text('UserId'+counter); 
 
    }); 
 

 
    // WHEN CLICKED ON SUBMIT RETRIEVE ALL DATA\\ 
 
    $("#target").submit(function(event) { 
 
    //alert("Handler for .submit() called."); 
 

 
    var dict = {}; 
 
    $("input[name=name]").each(function (i) { 
 
     dict[$(this).val()] = $('input[name=pwd]').eq(i).val(); 
 
    }); 
 
    alert(JSON.stringify(dict, null, 2)); 
 
    event.preventDefault(); 
 
    }); 
 

 
});

.input-group{ 
 
    margin-bottom: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="btn">Add row</button> 
 
<form id="target" method="POST"> 
 
    <div id="boxid"> 
 
    <div id="boxcontainerid" class="form-group"> 
 
     <div class="input-group"> 
 
     <div class="countid input-group-addon">UserId</div> 
 
     <input type="text" class="form-control" name="name" placeholder="username"> 
 
     <div class="input-group-addon">?</div> 
 
     </div> 
 

 
     <div class="input-group"> 
 
     <div class="input-group-addon">Password</div> 
 
     <input type="text" class="form-control" name="pwd" placeholder="password"> 
 
     </div> 
 
     <hr> 
 
    </div> 
 

 
    </div> 
 
    <button>send</button> 
 
</form>

注ので、私は、ユーザー名input要素にidを削除しました代わりにname="name"を使用しました。