N個のダイナミック入力から値を取得する方法

Question

私はオプションで選択します。このオプションは、ユーザーがその入力に情報を入力できるようにした後、ボタンをクリックする必要がある入力の数を持っています値は、今私はこのようにこれをやっていることを表示します

var value1 = $('#Input1').val(); 

ここでの問題は、ユーザが200個の入力の最大値を作成することができますので、私は上記の方法でこれをやり続けるならば、私はよということです200の入力でそれを行う必要があり、それは多くのコード行ですが、私の質問は、N個の入力の値を取得する方法を終了する場合、私は入力をループで動的に描画するので、すべての入力IDはInput(MyForVariable), Input1, Input2... etc 、多分私は値を得るために別のループを作成することを考えていますその入力の、ここに私のコードは次のとおりです。

$(document).ready(function() { 
 
    $('#sel').change(function() { 
 
    draw(); 
 
    }); 
 
    
 
    $('#btn').click(function() { 
 
    show(); 
 
    }); 
 
}); 
 

 
function draw() { 
 
    var selected = $('#sel').val(); 
 
    var html = ""; 
 
    
 
    for (i = 1; i <= selected; i++) { 
 
    html += '<input type="text" id="Imput' + i + '" />'; 
 
    } 
 
    $('#forms').html(html); 
 
} 
 

 
function show() { 
 
    var total = $('#sel').val(); 
 
    
 
    if (total == 2) { 
 
    var val1 = $('#Imput1').val(); 
 
    var val2 = $('#Imput2').val(); 
 
    
 
    alert(val1 + val2); 
 
    } 
 
    
 
    if (total == 3) { 
 
    var val1 = $('#Imput1').val(); 
 
    var val2 = $('#Imput2').val(); 
 
    var val3 = $('#Imput3').val(); 
 
    
 
    alert(val1 + val2 + val3); 
 
    } 
 
}

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

 

 

 
<select id="sel"> 
 
    <option value="2">A</option> 
 
    <option value="3">B</option> 
 
    <option value="4">C</option> 
 
    <option value="5">D</option> 
 
</select> 
 

 
<div id="forms"> 
 
</div> 
 

 
<button id="btn">Click</button>

Answer 1

コンテナ内のすべてのあなたのinput Sを入れ、それらをループ：あなたの

$('#add').on('click', function() { 
 
    $('<input />').appendTo('#myinputs'); 
 
}); 
 

 

 
$('#get').on('click', function() { 
 
    var values = []; 
 
    
 
    $('#myinputs input').each(function() { 
 
    values.push(this.value); 
 
    }); 
 
    
 
    console.log(values); 
 
});

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

 
<div id="myinputs"> 
 
    <input /> 
 
</div> 
 

 
<button id="add">Add another input</button> 
 

 
<hr /> 
 

 
<button id="get">Get values</button>

Answer 2

常にこのように入力をスローすることができます：

var myInputArray = []; 

$('input[type="text"]').each(function(){ 
    myInputArray.push($(this).val()); 
} 

その後、あなたは配列にロックすることにより、自分の価値観を取得することができます：

alert(myInputArray[0]) //The first value of the array => first input 

Answer 3

あなたは、いくつかの属性を設定し、それを持っているすべての要素を取得することができます

$(document).ready(function() { 
 
    $('#sel').change(function() { 
 
    draw(); 
 
    }); 
 
    
 
    $('#btn').click(function() { 
 
    show(); 
 
    }); 
 
}); 
 

 
function draw() { 
 
    var selected = $('#sel').val(); 
 
    var html = ""; 
 
    
 
    for (i = 1; i <= selected; i++) { 
 
    html += '<input type="text" id="Imput' + i + '" to-count />'; 
 
    } 
 
    $('#forms').html(html); 
 
} 
 

 
function show() { 
 
    var total = $('#sel').val(); 
 
    var sum = ""; 
 
    var inputs = $('[to-count]'); 
 
    
 
    console.log(inputs.length); 
 
    for (let i=0; i < inputs.length ; i++){ 
 
    sum += inputs[i].value;  
 
    } 
 

 
    alert(sum); 
 
}

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

 

 

 
<select id="sel"> 
 
    <option value="2">A</option> 
 
    <option value="3">B</option> 
 
    <option value="4">C</option> 
 
    <option value="5">D</option> 
 
</select> 
 

 
<div id="forms"> 
 
</div> 
 

 
<button id="btn">Click</button>

Answer 4

を

次のコードを使用して、各選択オプションの値を取得できます。

$("#sel option").each(function() { 
    console.log($(this).val()); 
});