AJAX JQuery PHPメール送信フォーム

Question

2つの連絡フォームを持つサイトで作業しています。私はajax jqueryを使用してPHP経由でメールを送信しています。

シングルフォームとjQueryを使用するとうまくいきます。
jQueryコードを貼り付けてフォーム2の変数ごとに変更すると動作しますが、最初のjQueryコードは空白の値を送信しています。
一度に1つのフォームだけが別のページの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.'); 
    } 
    }); 
}); 

Iは、上記の順序の両方を使用する：1つのI場合、完全に作動空の値と第二のフォームを送信します2番目のjQueryを削除し、最初のコードはうまく動作しますが、2番目には送信するコードがありません。

Answer 1

いくつかの問題がここにあります。最初に、定義されていない結果を生成する重複した要素IDがページにあることがわかります。第2に、コードをコピーして貼り付けるのではなく、使用法に応じてコードを反復する（またはジェネリックにする）べきです。これにより、あなたのコードはDRY状態に保たれます。詳しい読書は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. 
      } 
     }) 
    } 
});