ajaxを使用して動的に作成されたdivを取り込む

Question

フォームのサブミットから特定のdivにajaxレスポンスを出力する方法を理解しようとしています。フォームは動的に生成されたボタンで、mysqlからのデータを値として持ち、生成された各ボタンに対して、このような結果のために作成されたdivもあります。

Example form id's: 
id="form1" 
id="form2" 
id="form3" 
id="form4" 

div id's: 
<div class="res" id="result1">Display form1 data</div> 
<div class="res" id="result2">Display form2 data</div> 
<div class="res" id="result3">Display form3 data</div> 
<div class="res" id="result4">Display form4 data</div> 

これは私の例です。 $ countはwhileループ内のid "form"をインクリメントしています。

echo '<form name="v" action="test.php" value="' . $row['data'] . '" method="post" id="form' . $count . '"><input name="v" type="hidden" value="' . $row['data'] . '"><input type="submit" class="btn" value="Submit"></form>'; 

私はこの仕事を得ることができますが、私はちょうど私が一意のIDの使用を必要とする理由であるクラスの「.RES」を使用する場合には、送信ボタンをクリックしてから成功応答をdiv要素のすべてを記入します$ countからインクリメントされた数。私はこれを達成する方法が不明です。

$(document).ready(function(){ 
    $(document).on("submit", "#form", function(event) 
    { 
     event.preventDefault();   
     $.ajax({ 
      url: $(this).attr("action"), 
      type: $(this).attr("method"), 
      dataType: "text", 
      data: new FormData(this), 
      processData: false, 
      contentType: false, 
     success: function(data, status) { 
      $(".res").html(data); 
     }, 
     error: function() { 
      alert('An error occurred.'); 
     } 
     });   
    }); 
}); 

誰かが私を助けてくれますか？ありがとう。

Answer 1

を持っています。あなたのAjaxの成功関数内

echo '<form name="v" action="test.php" value="' . $row['data'] . '" method="post" id="form' . $count . '" data-target="result' . $count . '">...'; 

以降、あなたが.each()は、カウンタ変数を提供しているという事実を使用することができ、この

$(document).ready(function(){ 
    $(document).on("submit", "form[data-target]", function(event) 
    { 
     var $target = $('#' + $(this).data('target')); 
     event.preventDefault();   
     $.ajax({ 
      url: $(this).attr("action"), 
      type: $(this).attr("method"), 
      dataType: "text", 
      data: new FormData(this), 
      processData: false, 
      contentType: false, 
     success: function(data, status) { 
      $target.html(data); 
     }, 
     error: function() { 
      alert('An error occurred.'); 
     } 
     });   
    }); 
}); 

Answer 2

IDはそれほど代わり

$(document).on("submit", "form", function(event) { 
    event.preventDefault(); 
    var id = this.id; // form1, form2 etc 
    .... 

または

$(document).on("submit", "form[name='v']", function(event) { 
    event.preventDefault(); 
    var id = this.id; // form1, form2 etc 
    .... 

を行い、その後、

$("#"+id.replace("form","result")).html(data); // result1, result2 etc 

またはフォーム上のデータ属性を使用一意である必要があります。

echo "<form data-id='result".$count."' ....> 

とあなたがターゲットのdivを含む、データ属性をformタグを拡張することができ

$(document).on("submit", "form[name='v']", function(event) { 
    event.preventDefault(); 
    var id = $(this).data("id"); // result1, result2 etc 
    .... 

、その後

$("#"+id).html(data); // result1, result2 etc 

Answer 3

ような何か：

$("form").each(function (i) { 
    $(this).on("submit", function() { 
    // ... 

    // in the ajax success callback: 
    $(".res").eq(i).html(data);