ユーザー入力に基づいて X テキストボックスを動的に生成するスクリプトを作成しました。各テキストボックスに独自の名前を付けて、生成後にそれぞれを個別に使用できるようにするにはどうすればよいですか?
デモ:フィドル
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#ppl").change(function(){
// The easiest way is of course to delete all textboxes before adding new ones
//$("#holder").html("");
var count = $("#holder input").size();
var requested = parseInt($("#ppl").val(),10);
if (requested > count) {
for(i=count; i<requested; i++) {
var $ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'});
$("#holder").append($ctrl);
}
}
else if (requested < count) {
var x = requested - 1;
$("#holder input:gt(" + x + ")").remove();
}
});
});
</script>
</head>
<body>
<Input type="text" id="ppl">
<button onclick="function()">Try it</button>
<div id="holder"></div>
</body>
</html>
$(document).ready(function(){
$("#ppl").change(function(){
var count = $("#holder input").size();
var requested = parseInt($("#ppl").val(),10);
if (requested > count) {
for(i=count; i<requested; i++) {
var $ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'});
$("#holder").append($ctrl);
}
} else if (requested < count) {
var x = requested - 1;
$("#holder input:gt(" + x + ")").remove();
}
});
});
生成されたテキストボックスを使用してユーザーに詳細情報を要求し、その新しい情報を使用して別のスクリプトを処理する予定です。