Question

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.

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?

Answer 1

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

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