양식을 2 개의 배열로 변환하는 방법

두 개의 텍스트 상자가있는 간단한 양식이 있습니다. 하나는 "이름"이고 다른 하나는 "성"입니다. 페이지에서 당신은 클릭 할 수 있으며 아래에 "이름"과 "성"을위한 두 개의 텍스트 상자가 더 추가됩니다. 기본적으로 원하는만큼 많은 쌍의 이름과 성을 추가 할 수 있습니다.양식을 2 개의 배열로 변환하는 방법

어떻게 정보를 가져 와서 "이름"과 "성"에 대해 하나씩 두 개의 배열로 변환합니까?

당신은 여기에서 데모를 볼 수 있습니다

<html> 
<head> 
    <script type="text/javascript" src="nutrition/jquery-3.1.1.js"></script> 
    <style type="text/css"> 
      div{ 
      padding:8px; 
      } 
    </style>enter code here 

</head> 

<body> 

<form action="results.php" method="get"> 


<script type="text/javascript"> 

$(document).ready(function(){ 

var counter = 2; 

$("#addButton").click(function() { 

var newTextBoxDiv = $(document.createElement('div')) 
    .attr("id", 'TextBoxDiv' + counter); 

newTextBoxDiv.after().html('<label>Name : </label>' + 
     '<input type="text" name="textbox' + counter + 
     '" id="textbox' + counter + '" value="" ><label> Surname : </label>' + 
     '<input type="text" name="textbox' + counter + 
     '" id="textbox' + counter + '" value="" >'); 


newTextBoxDiv.appendTo("#TextBoxesGroup"); 

counter++; 
}); 

$("#removeButton").click(function() { 

    counter--; 
    $("#TextBoxDiv" + counter).remove(); 

}); 


}); 
</script> 

<div id='TextBoxesGroup'> 
<div id="TextBoxDiv1"> 
    <label>Name : </label><input type='textbox' id='textbox1' > 
    <label>Surname : </label> <input type='textbox' id='textbox2' > 
</div> 
</div> 
<input type='button' value='Add' id='addButton'> 
<input type='button' value='Remove' id='removeButton'> 

<input type="submit" value="Go"> 
</form> 


</body> 
</html>

출처

2016-11-06 r_sole128

내가 이동 버튼을 클릭 .and 두 배열 all name =>names[], all surename =>surenames[]로 만들어진

우선은이 console.log .IT가 표시됩니다 여기에 http://poostudios.com/jstest2.html

코드입니다 표시됩니다

또한 텍스트 상자에 클래스 이름을 만들었습니다. Beacause 클래스 이름은 each 기능에만 적용됩니다.

var names=[]; 
 
var surenames=[]; 
 
$(document).ready(function(){ 
 

 
var counter = 2; 
 

 
$("#addButton").click(function() { 
 

 
var newTextBoxDiv = $(document.createElement('div')) 
 
    .attr("id", 'TextBoxDiv' + counter); 
 

 
newTextBoxDiv.after().html('<label>Name : </label>' + 
 
     '<input type="text" name="textbox' + counter + 
 
     '" id="textbox1" class="textbox1" value="" ><label> Surname : </label>' + 
 
     '<input type="text" name="textbox' + counter + 
 
     '" id="textbox2" class="textbox2" value="" >'); 
 

 

 
newTextBoxDiv.appendTo("#TextBoxesGroup"); 
 

 
counter++; 
 
}); 
 

 
$("#removeButton").click(function() { 
 

 
    counter--; 
 
    $("#TextBoxDiv" + counter).remove(); 
 

 
}); 
 
    $('input[type=submit]').click(function (e){ 
 
     e.preventDefault(); 
 
     var names = $('.textbox1').map(function(){ 
 
       return this.value 
 
     }).get(); 
 
    var surenames = $('.textbox2').map(function(){ 
 
       return this.value 
 
     }).get(); 
 
     
 
     console.log('names='+names); 
 
    console.log('surenames='+surenames); 
 
    
 
    }) 
 

 

 
});

div{ 
 
      padding:8px; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form action="results.php" method="get"> 
 

 

 
<div id='TextBoxesGroup'> 
 
<div id="TextBoxDiv1"> 
 
    <label>Name : </label><input type='textbox' class="textbox1" id='textbox1' > 
 
    <label>Surname : </label> <input type='textbox' class="textbox2"id='textbox2' > 
 
</div> 
 
</div> 
 
<input type='button' value='Add' id='addButton'> 
 
<input type='button' value='Remove' id='removeButton'> 
 

 
<input type="submit" value="Go"> 
 
</form>

출처

2016-11-06 14:00:01 prasanth

양식을 2 개의 배열로 변환하는 방법

답변

관련 문제