div에서 값을 추출하고 배열에 저장 - JSFindle 지정

Question

사용자가 add a row 버튼을 클릭하면 username과 password이라는 텍스트 필드 쌍이 jsfiddle link below과 같이 표시됩니다.

사용자가 send 버튼을 클릭하여 양식을 제출하면 사용자 이름과 암호 쌍을 추출하여 배열 (키 - 값 쌍)로 저장하려고합니다. 그래서, 1 배열은 하나 또는 여러 쌍의 username-password 객체를 저장할 수 있습니다.

어떻게하면됩니까? 지금까지의 작업은 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"을 사용했습니다.