動的に追加された（javascriptを使用して）要素から値を取得するにはどうすればよいですか？

Question

私のaspxページでは、私は動的にjavascriptを使用してクライアント側でHTMLコントロールを作成します。たとえば、ページのロード後には、ボタンのHTML 入力とをクリックすることで、ブラウザのボタンをクリックすることができます要素が表示されます選択。あなたは、もう一度クリックして、この要素は、（入力とはを選択）を再度追加します。だから、あなたは非常に多くの入力を作成し、（このすべて使用してjavascriptの、無ポストバック）したいよう選択することができます

ユーザーは、いくつかの入力と選択を作成し、その中でいくつかの情報を入力した後、彼はフォームを投稿しました。私はサーバー側で、このすべての動的に追加された要素を見つけて、いくつかのアクションを実行するために、このコントロールの値に依存します。

はどのようにして動的に追加された要素を見つけることができ、そしてこれを達成するための最良かつエレガントな方法は何ですか？

ありがとうございます。

Answer 1

新しい要素を作成し、カウンタエレメントが作成されるたびに増分します。入力要素の名前にカウンタの値を追加して、各要素に一意の名前が付くようにします。フォームがポストされたとき

は、非表示のフォームフィールドにカウンタの最終値を追加します。サーバー側のコードで

、ゼロから始まり、あなたはカウンタの値に達するまで続くループを作成します。ループ内で、対応するフォームフィールドの投稿された値を取得します。

Answer 2

各inputオブジェクトとselectオブジェクトをループし、現在のオブジェクトの名前/ idとそれに対応する値を取得するループを作成します。それらの項目を配列に追加し、ループが完了したら、それらの値をaspxファイルに渡します。

あなたはでこのアプローチに例を表示することができます：http://jsfiddle.net/euHeX/。現在は値を警告するだけですが、値をパラメータとしてajax経由でハンドラaspxファイルに渡すように簡単に変更できます。コードは、入力に基づいて新しい入力または選択ボックスを追加します。これは、現在の設定を反映するように変更されます。

HTML：（jQueryのを使用して）

<div id="dynamic"></div> 
<input type="button" id="submit-form" value="Submit>>"> 

はJavaScript：JavaScriptで

function createInput(type){ 
    for(var i=0; i<5; i++){ 
     if(type==0){ 
      var obj = '<input type="text" id="'+i+'" class="dynamicContent">'; 
     }else if(type==1){ 
      var obj = '<select id="'+i+'" class="dynamicContent"><option>--Select--</option></select>'; 
     } 
     $("#dynamic").append(obj); 
    } 
} 

function getContent(){ 
    var inputArray = []; 
    $(".dynamicContent").each(function(k,v){ 
     var o = $(this); 
     var oType; 
     if(o.is("input")){ oType = "input"; } 
     if(o.is("select")){ oType = "select"; }   
     var oID = oType+o.attr("id"); 
     var oValue = o.val(); 
     inputArray.push(oID+'='+oValue); 
    }); 
    alert(inputArray); 
} 

$("#submit-form").click(function(){ 
    getContent();  
}); 

// Set type to 0 for input or 1 for select 
var type = '1'; 
createInput(type); 

Answer 3

要素を追加するときに、要素に一意のIDを割り当て、Request.Form ["UniqueIdHere"]（C＃）またはRequest.Form（ "UniqueIdHere"）（VB.NET）を使用して値を取得します。

Answer 4

あなたはjQueryのを使用している場合は、ケーキの平和のようにこれをachiveする.live()を使用することができます！ http://api.jquery.com/live/

Answer 5

あなたのコントロールがポストバックを生き延びるかどうかはわかりませんが、動的に生成されたコントロールにアクセスするための優れたテクニック（あなたがそれらを永続化する方法を理解したと仮定して）以下のような何か：

は、あなたのページにパネルを追加します。ダイナミックに作成されたコントロールをこのパネルに追加します。OnClickイベントハンドラ（またはその他の方法）で

、以下のような何か：

foreach (DropDownList ddl in Panel1.Controls.OfType<DropDownList>()) 
{ 
    //put code here 
} 

foreach (TextBox txt in Panel1.Controls.OfType<TextBox>()) 
{ 
    //put code here 
}