Question

为什么我的表单不仅仅被提交一次？有时，它发送大约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

将提交处理程序移出click事件处理程序，即modal的click处理程序应如何显示，并为您重构了提交处理程序：

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

修订代码：

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

Ajax不止一次发送表单

2 个答案: