title: Is it possible to get multiple forms to work with one ajax post function
body: <p>Hey guys I have a system where there is one form for each friend you have and I used to have an ajax post function for each form, but I want to save code and was wondering if it was possible to get multiple forms to work with just one post function. If anyone has any advice on how to achieve this I would appreciate it. For example</p>
  
  <pre><code>&lt;div id="message"&gt;
       &lt;form id='submit' class='message-form' method='POST' &gt; 
        &lt;input type='hidden' id='to' value='friend1' maxlength='255' &gt;   
        Subject&lt;br&gt;&lt;input type='text'  id='subject' maxlength='50'&gt;&lt;br&gt;
         Message&lt;br&gt;&lt;textarea id='message2' cols='50' rows='15'&gt;&lt;/textarea&gt;
         &lt;input type='submit' id='submitmessage' class='responsebutton' value='Send'&gt; 
      &lt;/form&gt;
  &lt;/div&gt;
  
  
  $(document).ready(function(){
  $(".message-form").submit(function() {
   $("#submitmessage").attr({ disabled:true, value:\"Sending...\" });
  
  var to    = $('#to').attr('value');
  var subject    = $('#subject').attr('value');
  var message    = $('#message2').attr('value');
  
  $.ajax({
  type: "POST",
  url: "messageprocess.php",
  data: 'to='+ to + '&amp;subject=' + subject + '&amp;message=' + message,
  success: function(response) {
  if(response == "OK") {
  $('.message-form').html("&lt;div id='message'&gt;&lt;/div&gt;");
  $('#message').html("&lt;h2&gt;Email has been sent!&lt;/h2&gt;")
          .append("&lt;p&gt;Please wait...&lt;/p&gt;")
          .hide()
          .fadeIn(1500, function() {
            $('#message').append(\"&lt;img id='checkmark' src='images/check.png' /&gt;\");
          });
  </code></pre>