AJAX JQuery PHP郵件發送表單

Question

我正在一個有2個聯系表單的網站上工作，我使用ajax jquery通過php發送郵件。

當我使用單一形式和jQuery時，它可以正常工作。
當我粘貼jQuery代碼並按照Form 2變量進行修改時，它可以工作，但是隨后的jQuery代碼首先發送了空白值。
一次總的來說，我的HTML表單在不同頁面上僅能使用一種表單。

非常感謝您的幫助。 jQuery代碼

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.');
    }
  });
});

具有相同js文件的表單2的jQuery代碼：

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.');
    }
  });
});

當我按上述順序使用這兩種方法時：第一個發送空值，第二個形式運行正常，如果我刪除了第二個jQuery，則第一個代碼可以正常工作，但是第二個沒有代碼要發送。

Answer 1

我會做這樣的事情：

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

這里有一些問題。 首先，我可以看到頁面上有重復的元素ID，這些ID會產生未定義的結果。 其次，您不應該復制和粘貼代碼，而要根據使用情況遍歷（或使之通用）代碼。 這使您的代碼保持干燥。 在此處進一步閱讀： https : //en.wikipedia.org/wiki/Don%27t_repeat_yourself 。

如果仍然遇到問題，請添加jsFiddle以及遇到問題的代碼的特定部分。