Question

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

<div id="message">
     <form id='submit' class='message-form' method='POST' > 
      <input type='hidden' id='to' value='friend1' maxlength='255' >   
      Subject<br><input type='text'  id='subject' maxlength='50'><br>
       Message<br><textarea id='message2' cols='50' rows='15'></textarea>
       <input type='submit' id='submitmessage' class='responsebutton' value='Send'> 
    </form>
</div>


$(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 + '&subject=' + subject + '&message=' + message,
success: function(response) {
if(response == "OK") {
$('.message-form').html("<div id='message'></div>");
$('#message').html("<h2>Email has been sent!</h2>")
        .append("<p>Please wait...</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append(\"<img id='checkmark' src='images/check.png' />\");
        });

Answer 1

Easily done, e.g.:

<div class="message">
     <form class='message-form' method='POST' > 
      <input type='hidden' class='to' value='friend1' maxlength='255' >   
      Subject<br><input type='text'  class='subject' maxlength='50'><br>
      Message<br><textarea class='message' cols='50' rows='15'></textarea>
      <div class="result"></div>
    </form>
     <form class='message-form' method='POST' > 
      <input type='hidden' class='to' value='friend2' maxlength='255' >   
      Subject<br><input type='text'  class='subject' maxlength='50'><br>
      Message<br><textarea class='message' cols='50' rows='15'></textarea>
     <div class="result"></div>
     </form>
    <div class="result"></div>
    <button>Send</button>
</div>

$("button").click(function() {
    $("form.message-form").each(function() {
        var to = $(this).find(".to").val();
        var subject = $(this).find(".subject").val();
        var message = $(this).find(".message").val();
        doPost(to, subject, message);
    });
    return false;
});

function doPost(to, subject, message ) {
    $.ajax({
        type: "POST",
        url: "messageprocess.php",
        data: 'to='+ to + '&subject=' + subject + '&message=' + message,
        success: function(response) {
            if(response == "OK") {
                    $(this).find(".result").append("<img class='checkmark' src='images/check.png' />");
            }    
        }
    });
}​

Make sure that your message divs, forms and form elements have unique IDs (or none, if they aren’t necessary). You would be better off giving them a class identifier or such, as in the above example. You will also need to tweak the behaviour of doPost such that it correctly addresses elements based on your new markup structure. The above example has not been tested – my intention here is to give you an idea of what needs to happen rather than to provide a full working solution.