AJAX JQuery PHP mail sending form

Question

I am working on a site which having 2 contact forms, and I use ajax jquery to send mail via php.

When I use single form and jQuery, it works fine.
And when I paste the jQuery code and modify as per form 2 variables, it works, but then first jQuery code is sending blank values.
Over all at a time, only 1 form is working for my HTML forms on different page.

I appreciate your help in advance. Jquery code

var form=$('#contactform_forms');
var formMessages=$('#message');

$(form).submit(function(e){
  $('#submit_btns')
    .after('<img src="images/AjaxLoader.gif" class="loader" />')
    .attr('disabled','disabled');
  e.preventDefault();
  var formData=$(form).serialize();

  $.ajax({
    type:'POST',
    url:'contact.php',
    data:formData
  })
    .done(function(response){
    $(formMessages).removeClass('error');
    $(formMessages).addClass('success');
    $(formMessages).text('Thanks! Message has been sent.');
    $(formMessages).fadeOut(10000);
    $('#contactform_forms img.loader').fadeOut('slow',function(){$(this).remove()});
    $('#submit_btns').removeAttr('disabled');
    $('#contact_name').val('');
    $('#contact_email').val('');
    $('#contact_phone').val('');
    $('#contact_message').val('');

  }).fail(function(data){
    $(formMessages).removeClass('success');
    $(formMessages).addClass('error');
    if(data.responseText!==''){
      $(formMessages).text(data.responseText);
    }else{
      $(formMessages).text('Oops! An error occured.');
    }
  });
});

jQuery code for form 2 with the same js file:

var form=$('#wholesalers_forms');
var formMessages=$('#message');

$(form).submit(function(e){
  $('#submit_btns1')
    .after('<img src="images/AjaxLoader.gif" class="loader" />')
    .attr('disabled','disabled');
  e.preventDefault();
  var formData=$(form).serialize();

  $.ajax({
    type:'POST',
    url:'wholesalers.php',
    data:formData
  })
    .done(function(response){
    $(formMessages).removeClass('error');
    $(formMessages).addClass('success');
    $(formMessages).text('Thanks! Message has been sent.');
    $(formMessages).fadeOut(10000);
    $('#wholesalers_forms img.loader').fadeOut('slow',function(){$(this).remove()});
    $('#submit_btns1').removeAttr('disabled');
    $('#hs_name').val('');
    $('#hs_email').val('');
    $('#hs_company').val('');
    $('#hs_vat').val('');
    $('#hs_address').val('');
    $('#hs_postcode').val('');
    $('#hs_city').val('');
    $('#hs_phone').val('');
    $('#hs_message').val('');

  }).fail(function(data){
    $(formMessages).removeClass('success');
    $(formMessages).addClass('error');
    if(data.responseText!==''){
      $(formMessages).text(data.responseText);
    }else{
      $(formMessages).text('Oops! An error occured.');
    }
  });
});

When I use both as the above order: 1st one send empty value and second form working perfectly, if i remove 2nd jQuery then first code working fine, but second do not have code to send.

Answer 1

I'd do something like this:

function getFormData(form_id) { 
    var form_data = {};
    $.each($("#" + form_id).serializeArray(), function(i, obj) {
        if (form_data[obj.name] == undefined) {
            form_data[obj.name] = obj.value;
        } else if (typeof form_data[obj.name] == Array) {
            form_data[obj.name].push(obj.value);
        } else {
            form_data[obj.name] = [form_data[obj.name], obj.value];
        }
    });
    return form_data;
}

function validate(form_id) {
    var error = false;

    //run some validation, which alters display and sets error to true on failure.

    return error;
}

$(document).on("submit", "form", function(event) {
    var form_id = $(this).attr("id");
    if (validate(form_id)) { //If error is found.
        event.preventDefault();
    } else { //Else the form is good.
        var form_data = getFormData(form_id),
            url = (form_id == "contactform_forms") ? "contact.php" : "wholsalers.php";
        $.ajax({
            type: "post",
            url: url,
            data: form_data,
            success: function(data) {
                //Display a confirmation message.
            }
        })
    }
});

Answer 2

There are a few issues here. First I can see you've got duplicate element IDs on the page which will produce undefined results. Second, you shouldn't be copying and pasting code but iterating through (or making generic) your code, depending on the usage. This keeps your code DRY. Further reading here: https://en.wikipedia.org/wiki/Don%27t_repeat_yourself .

If you are still having trouble, add a jsFiddle with the specific parts of the code you are having trouble with.