只提交一次ajax表单。

I have this form, and when the user send it, sometimes it gets submitted 2-3-4x, or more, not just only once.

我有这个表单，当用户发送它时，有时它会提交2-3-4x，或者更多，不止一次。

I give the button a disabled, but that didnt solve the problem.

我禁用了按钮，但这并不能解决问题。

Whats going on wrong? I dont have any idea, what to do with this. If the disabled button wont solve it, what will?

发生了什么错了吗?我不知道该怎么处理这件事。如果禁用按钮不能解决这个问题，那么什么能解决呢?

<form class="form-horizontal" id="AjanlatForm" method="post">
  <div class="form-group">
    <label class="col-md-3 control-label ajanlat_label" >Az Ön neve:</label>
    <div class="col-md-8">
      <input id="AjanlatNev" name="AjanlatNev" type="text" class="form-control input-md">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-3 control-label ajanlat_label" >E-mail címe:</label>
    <div class="col-md-8">
      <input id="AjanlatEmail" name="AjanlatEmail" type="text" class="form-control input-md">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-3 control-label ajanlat_label" >Telefonszáma:</label>
    <div class="col-md-8">
      <input id="AjanlatTel" name="AjanlatTel" type="text" class="form-control input-md">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-3 control-label ajanlat_label" >Szállítási cím:</label>
    <div class="col-md-8">
      <input id="AjanlatCim" name="AjanlatCim" type="text" class="form-control input-md">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-3 control-label ajanlat_label" >Mennyiség:</label>
    <div class="col-md-8">
      <div class="input-group">
        <input type="text" class="form-control" id="AjanlatMennyiseg" name="AjanlatMennyiseg">
        <span class="input-group-btn">
        <select class="btn selectBtn" id="AjanlatMennyisegTipus" name="AjanlatMennyisegTipus">
          <option  value="Darab">Darab</option>
          <option  value="Kamion">Kamion</option>
          <option  value="Raklap">Raklap</option>
          <option  value="Tekercs">Tekercs</option>
          <option  value="Zsák">Zsák</option>
          <option  value="cm">cm</option>
          <option  value="m">m</option>
          <option  value="m2">m2</option>
          <option  value="m3">m3</option>
        </select>
        </span> </div>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-3 control-label ajanlat_label" >Üzenet:</label>
    <div class="col-md-8">
      <textarea name="AjanlatUzenet" id="AjanlatUzenet" rows="7" class="form-control input-md"></textarea>
    </div>
  </div>
  <div class="text-center">
    <p class="ajanlat_modal_text">A küldés gombot kérjük csak egyszer nyomja meg.</p>
    <input type="hidden" id="AjanlatTermekID" name="AjanlatTermekID" value="91">
    <button type="button" id="kerdesButton" class="btn btn-default sidebar_button">Ajánlatkérés elküldése</button>
  </div>
  <div class="text-center">
    <div id="AjanlatResult"></div>
  </div>
</form>



$(document).ready(function(e) {

    $('.fancybox').fancybox();

    $("#AjanlatKeresBtn").click(function() 

    {

        $('#AjanlatResult').hide();

        $("#AjanlatModal").modal("show");
        $('#kerdesButton').click(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').prop('disabled', false);
                        $('#kerdesButton').hide();
                        $('#AjanlatForm')[0].reset();
                        location.href = "https://my-domain.com/uzenet/uj-ajanlatkeres";
                    }
                });
            }
            else
            {
                $('#kerdesButton').prop('disabled', false);
                $('#AjanlatResult').fadeIn( "slow" ).html('<div class="javascript_rror_div">'+(FormErros.join('<br/>'))+'</div>');
            }
        });
    });
});

3 个解决方案

#1

Try changing your button to type="submit" and register a submit event handler for the form rather than a click event handler for the button.

尝试将您的按钮改为type="submit"，并为表单注册一个提交事件处理程序，而不是按钮的单击事件处理程序。

   <form class="form-horizontal" id="AjanlatForm" method="post">
      <div class="form-group">
        <label class="col-md-3 control-label ajanlat_label" >Az Ön neve:</label>
        <div class="col-md-8">
          <input id="AjanlatNev" name="AjanlatNev" type="text" class="form-control input-md">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label ajanlat_label" >E-mail címe:</label>
        <div class="col-md-8">
          <input id="AjanlatEmail" name="AjanlatEmail" type="text" class="form-control input-md">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label ajanlat_label" >Telefonszáma:</label>
        <div class="col-md-8">
          <input id="AjanlatTel" name="AjanlatTel" type="text" class="form-control input-md">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label ajanlat_label" >Szállítási cím:</label>
        <div class="col-md-8">
          <input id="AjanlatCim" name="AjanlatCim" type="text" class="form-control input-md">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label ajanlat_label" >Mennyiség:</label>
        <div class="col-md-8">
          <div class="input-group">
            <input type="text" class="form-control" id="AjanlatMennyiseg" name="AjanlatMennyiseg">
            <span class="input-group-btn">
            <select class="btn selectBtn" id="AjanlatMennyisegTipus" name="AjanlatMennyisegTipus">
              <option  value="Darab">Darab</option>
              <option  value="Kamion">Kamion</option>
              <option  value="Raklap">Raklap</option>
              <option  value="Tekercs">Tekercs</option>
              <option  value="Zsák">Zsák</option>
              <option  value="cm">cm</option>
              <option  value="m">m</option>
              <option  value="m2">m2</option>
              <option  value="m3">m3</option>
            </select>
            </span> </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label ajanlat_label" >Üzenet:</label>
        <div class="col-md-8">
          <textarea name="AjanlatUzenet" id="AjanlatUzenet" rows="7" class="form-control input-md"></textarea>
        </div>
      </div>
      <div class="text-center">
        <p class="ajanlat_modal_text">A küldés gombot kérjük csak egyszer nyomja meg.</p>
        <input type="hidden" id="AjanlatTermekID" name="AjanlatTermekID" value="91">
        <button type="submit" id="kerdesButton" class="btn btn-default sidebar_button">Ajánlatkérés elküldése</button>
      </div>
      <div class="text-center">
        <div id="AjanlatResult"></div>
      </div>
    </form>



    $(document).ready(function(e) {

        $('.fancybox').fancybox();

        $("#AjanlatKeresBtn").click(function() 

        {

            $('#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').prop('disabled', false);
                            $('#kerdesButton').hide();
                            $('#AjanlatForm')[0].reset();
                            location.href = "https://my-domain.com/uzenet/uj-ajanlatkeres";
                        }
                    });
                }
                else
                {
                    $('#kerdesButton').prop('disabled', false);
                    $('#AjanlatResult').fadeIn( "slow" ).html('<div class="javascript_rror_div">'+(FormErros.join('<br/>'))+'</div>');
                }
            });
        });
    });

#2

You would need to do this to the button:

你需要对按钮这样做:

<button class="myButton" type="submit">Click Here</button>

And the in the javascript you would need to do this:

在javascript中你需要这样做:

$(".myButton").click(function(){
    $(".myForm").submit(function(e) {
        // Cancels the form's submit action.
        e.preventDefault();
        // Do post in here
    })    
})

#3

Replace your ajax call with following:

将ajax调用替换为以下内容:

        var form = $("form");
        var jqXHR = form.data("jqXHR");
        if (jqXHR) {
            jqXHR.abort();
        }

        form.data("jqXHR", $.ajax({
            type: 'POST',
            cache: false,
            data: $('#AjanlatForm').serialize(),
            url: 'files/uj-ajanlatkeres.php',
            success: function (data) {
                //$('#kerdesButton').prop('disabled', false);
                $('#kerdesButton').hide();
                $('#AjanlatForm')[0].reset();
                location.href = "https://my-domain.com/uzenet/uj-ajanlatkeres";
            },
            complete: function (jqXHR, textStatus) {
                form.removeData('jqXHR');
            }
        }));