title: Multiple form submission with ajax and jquery
body: <p>I am having an issue where I have two forms on the one page that are submitted using Ajax and Jquery. My code works to submit the forms the only issue is when one form is submitted it shows the confirmation message on the other form as well, even though that form has not been submitted.</p>
  
  <p>Basically I have hidden a div with the confirmation message and it appears after the message successfully goes through. Does anybody know how I can stop the confirmation message appearing on the form that hasn't submitted. Here is the code - </p>
  
  <pre><code>function jqsub() {
  
  //Form 1
  var $form = $('#catwebformform39698');
  var $messagebox = $('#hide-message');
  var $successmessage = "&amp;nbsp;"; 
  
      $.ajax({
      type: 'POST',
      url: $form.attr('action'),
      data: $form.serialize(),
      success: function (msg) {
              $messagebox.append($successmessage);
              $messagebox.delay(800).fadeIn(550);
              $form.fadeOut(250);
          }
  });
  
  //Form 2
  var $form2 = $('#catemaillistform1628'); 
  var $messagebox2 = $('#hide-message2');
  var $successmessage2 = "&amp;nbsp;"; 
  
  $.ajax({
      type: 'POST',
      url: $form2.attr('action'),
      data: $form2.serialize(),
      success: function (msg) {
              $messagebox2.append($successmessage2);
              $messagebox2.delay(800).fadeIn(550);
              $form2.fadeOut(250);
          }
  });
  } 
  </code></pre>
  
  <p>Any pointers/ideas appreciated.
  Cheers
  Nik</p>
  
  <p><em><strong></em> Edit <em>*</em></strong>
  I had tried to add another jqsub() function but the system I am using will only allow one. So essentially I was hoping I could stop the process with some kind of logic within the code or similar. So essentially they have to exist in the one function.</p>