Ajaxが複数回フォームを送信する

Question

フォームが1回だけ提出されるのはなぜですか？時々、それは約2-3-4-5回それを送ります、そして私は2-3-4-5電子メールを得る、新しいメッセージがサイトから送られること。

無効になっているボタンがここで機能しないのはなぜですか？私は何をすればよいですか？

$("#AjanlatKeresBtn").click(function() // This opens the modal only 
{ 
    $('#AjanlatResult').hide(); 
    $("#AjanlatModal").modal("show"); 
    $('#AjanlatForm').on('submit', function(e) 
    { 
     $('#kerdesButton').prop('disabled', true); 
     e.preventDefault(); 
     var FormErros = []; 
     var AjanlatNev = $('#AjanlatNev').val(); 
     var AjanlatEmail = $('#AjanlatEmail').val(); 
     var AjanlatTel = $('#AjanlatTel').val(); 
     var AjanlatCim = $('#AjanlatCim').val(); 
     var AjanlatMennyiseg = $('#AjanlatMennyiseg').val(); 
     var AjanlatUzenet = $('#AjanlatUzenet').val(); 
     var AjanlatTermekID = $('#AjanlatTermekID').val(); 
     if($.trim(AjanlatNev) == "") { FormErros.push("Nem adta meg a nevét."); } 
     if($.trim(AjanlatEmail) == "") { FormErros.push("Nem adta meg az e-mail címét."); } 
     if(AjanlatEmail != ""){if(validate_Email(AjanlatEmail) == false){FormErros.push("Elképzelhető, hogy hibásan adta meg az e-mail címét.");}} 
     if($.trim(AjanlatTel) == "") { FormErros.push("Nem adta meg a telefonszámát."); } 
     if($.trim(AjanlatUzenet) == "") { FormErros.push("Nem írt semmilyen kérdést vagy üzenetet."); } 
     if($.trim(AjanlatTermekID) == "") { FormErros.push("Hiányzik a termék ID."); } 
     if(AjanlatTermekID != ""){if(!$.isNumeric(AjanlatTermekID)){FormErros.push("A termék ID nem szám típusú.");}} 
     if($.trim(AjanlatCim) == "") { FormErros.push("Nem adta meg a szállítási címet."); } 
     if($.trim(AjanlatMennyiseg) == "") { FormErros.push("Nem adta meg a termék(ek) mennyiségét."); } 
     if(FormErros.length == 0) 
     { 
      $.ajax({ 
       type: 'POST', 
       cache: false, 
       data: $('#AjanlatForm').serialize(), 
       url: 'files/uj-ajanlatkeres.php', 
       success: function(data) 
       { 
        $('#kerdesButton').hide(); 
        $('#AjanlatForm')[0].reset(); 
        location.href = "<?php echo $host; ?>/uzenet/uj-ajanlatkeres"; 
       } 
      }); 
     } 
     else 
     { 
      $('#kerdesButton').prop('disabled', false); 
      $('#AjanlatResult').fadeIn("slow").html('<div class="javascript_rror_div">'+(FormErros.join('<br/>'))+'</div>'); 
     } 
    }); 
    e.stopPropagation(); 
}); 

Answer 1

移動は、モーダルのハンドラをクリックする必要がありますどのように見えるかつまり、クリックイベントハンドラのうちのハンドラを提出し、私はあなたのために提出するハンドラをリファクタリング：

$("#AjanlatKeresBtn").click(function(){ 
    $('#AjanlatResult').hide(); 
    $("#AjanlatModal").modal("show"); 
    e.stopPropagation(); 
}); 


$('#AjanlatForm').on('submit', function(e) 
{ 
    $('#kerdesButton').prop('disabled', true); 
    e.preventDefault(); 
    var field, 
     FormErros = [], 
     fields = { Nev: "Nem adta meg a nevét.", 
        Tel: "Nem adta meg a telefonszámát.", 
        Uzenet: "Nem írt semmilyen kérdést vagy üzenetet.", 
        TermekID: "Hiányzik a termék ID.", 
        Cim: "Nem adta meg a szállítási címet.", 
        Mennyiseg: "Nem adta meg a termék(ek) mennyiségét.", 
        Email: "Nem adta meg az e-mail címét." 
       }; 
    Object.keys(fields).forEach(function(key){ 
     field = $("#Ajanlat"+key).val(); 
     if($.trim(field) == "") { FormErros.push(field[key]); } 
     else{ 
      if(key == 'Email' && !validate_Email(field)){FormErros.push("Elképzelhető, hogy hibásan adta meg az e-mail címét.");} 
      if(key == 'TermekID' && !$.isNumeric(field)){FormErros.push("A termék ID nem szám típusú.");} 
     } 
    }); 
    if(FormErros.length == 0) 
    { 
     $.ajax({ 
      type: 'POST', 
      cache: false, 
      data: $('#AjanlatForm').serialize(), 
      url: 'files/uj-ajanlatkeres.php', 
      success: function(data) 
      { 
       $('#kerdesButton').hide(); 
       $('#AjanlatForm')[0].reset(); 
       location.href = "<?php echo $host; ?>/uzenet/uj-ajanlatkeres"; 
      } 
     }); 
    } 
    else 
    { 
     $('#kerdesButton').prop('disabled', false); 
     $('#AjanlatResult').fadeIn("slow").html('<div class="javascript_rror_div">'+(FormErros.join('<br/>'))+'</div>'); 
    } 
}); 

Answer 2

あなたは全体を移動する必要があります$('#AjanlatForm').on('submit',function(e)...がon機能を監視しました。クリックする度にモーダルを開き、別のウォッチャーイベントを設定します。スニペットを添付して、コード内で何が起こっているのかを視覚的に示しました。ご不明な点がございましたらお知らせください。

現在のコード：

$('#clickme').on('click',function(){ 
 
\t 
 
\t let output1 = $("<br/><span>Button 1</span>"); 
 
\t 
 
\t $('body').append(output1); 
 
\t 
 
\t $('#clickme2').on('click',function(){ 
 
\t \t 
 
\t \t let output2 = $("<br/><span>Button 2</span>"); 
 
\t \t 
 
\t \t $('body').append(output2); 
 

 
\t }); 
 
\t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="button" id="clickme" value="click"> 
 
<input type="button" id="clickme2" value="click 2">

改訂コード：

$('#clickme').on('click',function(){ 
 

 
    let output1 = $("<br/><span>Button 1</span>"); 
 

 
    $('body').append(output1); 
 

 
}); 
 

 
$('#clickme2').on('click',function(){ 
 

 
    let output2 = $("<br/><span>Button 2</span>"); 
 

 
    $('body').append(output2); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="button" id="clickme" value="click"> 
 
<input type="button" id="clickme2" value="click 2">