フォームを2つの配列に変換する方法

私は2つのテキストボックスを持つ単純なフォームを持っています。ひとつは「名前」、もうひとつは「姓」です。あなたはクリックすることができますし、 "名前"と "姓"の下にも2つのテキストボックスが追加されますので、基本的に名前と姓のペアを自由に追加できます。フォームを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

私はGoボタンをクリックし.AND 2つの配列 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つの配列に変換する方法

答えて

関連する問題