通過jQuery中的$ .ajax提交表單后獲取成功信息

Question

我在單個頁面上有一些表格，並且通過這種方法提交它們：

$(function() {  
    $(".button").click(function() {  

var upform = $(this).closest('.upform'); 

    var txt = $(this).prev(".tekst").val();  

    var dataString = 'tekst='+ txtr;

    $.ajax({  
          type: "POST",  
          url: "http://url-to-submit.com/upload/baza",  
          data: dataString,  
          success: function() {  

            upform.html("<div class='message'></div>");  

            $('.message').html("<h2>FORM SUBMITTED</h2>")  
            .append("<p>THANKS!!</p>")  
            .hide()  
            .fadeIn(1500, function() {  
            $('.message').append("<img src='http://my-images.com/i/check.png' />");  
            });  


          }  
        });  
    return false; 

    });  
  });  

如您所見，提交表單后，將顯示消息div而不是提交的表單。

當我僅提交一種表單時，它會完美工作-然后將其更改為我的消息div，但是當我提交第二個表單，下一個表單和下一個表單時-每當我已提交的表單的所有消息刷新時。 看起來不好 我只想對實際提交的表格進行操作。 如何解決？

Answer 1

那么，您可以使用$('.message').html()來設置每個.message div的$('.message').html() 。 嘗試這個：

upform.find('.message').html(...)

Answer 2

很難看到HTML的外觀，但是我想是這樣，

$('.message')

應該是這樣的，

$('.message', upForm).

Answer 3

首先，您必須找出消息div （ upform.find（'。message'） ），然后向其中添加任何html。 我認為你的代碼應該是

$(function() {  
    $(".button").click(function() {  

var upform = $(this).closest('.upform'); 

    var txt = $(this).prev(".tekst").val();  

    var dataString = 'tekst='+ txtr;

    $.ajax({  
          type: "POST",  
          url: "http://url-to-submit.com/upload/baza",  
          data: dataString,  
          success: function() {  

            upform.html("<div class='message'></div>");  

            upform.find('.message').html("<h2>FORM SUBMITTED</h2>")  
            .append("<p>THANKS!!</p>")  
            .hide()  
            .fadeIn(1500, function() {  
            upform.find('.message').append("<img src='http://my-images.com/i/check.png' />");  
            });  


          }  
        });  
    return false; 

    });  
  });  

Answer 4

另一種無需在當前代碼中進行更多編輯的方式，只需添加幾行即可。

var msgbox = $("<div class='message'></div>");
upform.html(msgbox);
msgbox.html("<h2>FORM SUBMITTED</h2>")  
.append("<p>THANKS!!</p>")  
.hide()  
.fadeIn(1500, function() {  
  $(this).append("<img src='http://my-images.com/i/check.png' />");  
});