Ajax Formular mehr als einmal senden

Question

Warum wird mein Formular nicht nur einmal eingereicht? Manchmal sende es es etwa 2-3-4-5 mal, und ich bekomme 2-3-4-5 email, dass eine neue Nachricht von der Seite gesendet wird.

Warum funktioniert hier nicht die Schaltfläche deaktiviert? Was soll ich tun?

$("#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

Verschieben Handler aus dem Click-Ereignishandler einreichen, das ist, wie für modal klicken Handler sollte wie folgt aussieht, und ich Refactoring Ihr einreichen Handler für Sie:

$("#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

Sie müssen die gesamte bewegen $('#AjanlatForm').on('submit',function(e)... beobachtete in seiner on-Funktion. Jedes Mal, wenn Sie das Modal öffnen, wird ein anderes Beobachterereignis eingestellt. Ich habe ein Snippet angehängt, um Ihnen visuell zu zeigen, was in Ihrem Code passiert. Bitte lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben.

Aktuelle Code:

$('#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">

Revised Code:

$('#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">