使用Ajax填充動態創建的div

Question

我試圖弄清楚如何將表單提交的ajax響應輸出到特定的div。 表單是動態生成的按鈕，以來自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>';

我可以使它起作用，但是如果我僅對類使用“ .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

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 2

您可以使用包含目標div的data屬性擴展form標簽。

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 3

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

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

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