Putting Multiple Forms On The Same Page

I've got a php / ajax form that works 100% ... but I need a few of the same form on the SAME page. Of course each of the forms will go to a different recipient. I tried duplicating

Solution 1:

Instead of using IDs for the jquery selectors, use classes. You can give all of the forms the same class name and the fields that are the same get the same classes as well.

Then, use those in your jquery:

$('.contactform').submit(function(){
    $.post(action, {
        name: $(this).children('.name').val(),

It should work for however many instances of the form you have because all of the input fields are referenced by $(this), which is the submitted form, regardless of id or name.

EDIT:

This should work for you. For any number of forms, this is all you would need.

jQuery(document).ready(function(){

    $('.contactform').submit(function(){

        var action = $(this).attr('action');

        $('.submit', this).attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />');

        $('.message', this).slideUp(750,function() {
        $('.message', this).hide();

        $.post(action, {
            name: $('.name', this).val(),
            email: $('.email', this).val(),
            phone: $('.phone', this).val(),
            dayin: $('.dayin', this).val(),
            dayout: $('.dayout', this).val(),
            comments: $('.comments', this).val(),
            verify: $('.verify', this).val()
        },
        function(data){
                $('.message', this).html(data);
                $('.message', this).slideDown('slow');
                $('img.loader', this).fadeOut('fast',function() {
            $(this).remove();
        });
                $('.submit', this).removeAttr('disabled');
            if(data.match('success') != null);
                $('.message', this).show().delay(5000).fadeOut();
            });
        });
        returnfalse;
    });
});