在jquery中通过$ .ajax提交表单后获取成功信息

I have a few forms on my single page and I'm submitting them by this method:

我的单页上有几个表单,我通过这种方法提交它们:

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

    });  
  });

As you can see, after submit a form, message div appears instead of submitted form.

如您所见,提交表单后,将显示消息div而不是提交的表单。

It works perfectly, when I submit only one form - then it changes to my message div, but when I submit second, and next and next - every time ALL of my already submitted form's messages refreshing. It looks bad. I want to operate only on actually submitting form. How to fix it?

它工作得很完美,当我只提交一个表单时 - 然后它会更改为我的消息div,但是当我提交第二个,下一个和下一个时 - 每次我提交的所有表单的消息都会刷新。看起来很糟糕。我想只在实际提交表格时运作。怎么解决?

4 个解决方案

#1

Well you're setting the message of every .message div by using $('.message').html(). Try this:

好吧,你使用$('。message')。html()设置每个.message div的消息。尝试这个:

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

#2

Hard to tell without seeing how your HTML looks but i'm guessing it's this bit,

很难说没看到你的HTML看起来如何,但我猜它是这个,

$('.message')

Should be something like,

应该是这样的,

$('.message', upForm).

#3

First you have to find out the message div (upform.find('.message')) and than add any html to it. i think your code should be

首先,您必须找到消息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; 

    });  
  });

#4

Another way without editing more in your current code just add few lines.

另一种没有在当前代码中编辑更多内容的方法只需添加几行。

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' />");  
});

#1