AJAX JQuery PHP 邮件发送表单

Question

我正在一个有 2 个联系表格的网站上工作，我使用 ajax jquery 通过 php 发送邮件。

当我使用单一表单和 jQuery 时，它工作正常。
当我粘贴 jQuery 代码并根据表单 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.');
    }
  });
});

表单2的jQuery代码与相同的js文件：

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

这里有几个问题。首先，我可以看到您在页面上有重复的元素 ID，这将产生未定义的结果。其次，您不应该复制和粘贴代码，而是根据使用情况迭代（或制作通用）代码。这使您的代码保持干燥。进一步阅读：https://en.wikipedia.org/wiki/Don%27t_repeat_yourself。

如果您仍然遇到问题，请添加一个 jsFiddle，其中包含您遇到问题的代码的特定部分。

Answer 2

我会这样做：

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