使用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>'; 

我能得到這個工作，但它會填滿所有的div與點擊提交按鈕成功響應，如果我只是用「.RES」爲這就是爲什麼我使用需要的唯一ID的類$ 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

您可以與數據屬性延伸form標籤，包含靶的div。

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

，後來你的Ajax成功功能裏面，做這樣的事情

$(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."' ....> 

和具有

$(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

您可以使用.each()提供了一個計數器變量的事實：

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

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