【问题标题】:Submit an ajax form just only once只需提交一次 ajax 表单
【发布时间】:2025-12-08 23:55:02
【问题描述】:

我有这个表单,当用户发送它时,有时它会被提交 2-3-4 倍或更多,而不仅仅是一次。

我将按钮设为禁用,但这并没有解决问题。

怎么了?我不知道该怎么办。如果禁用的按钮不能解决它,那会是什么?

<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>');
            }
        });
    });
});

【问题讨论】:

    标签: javascript jquery css ajax forms


    【解决方案1】:

    尝试将您的按钮更改为type="submit" 并为表单注册submit 事件处理程序,而不是为按钮注册click 事件处理程序。

       <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>');
                    }
                });
            });
        });
    

    【讨论】:

    • 您好!我只需要这些更改吗?我试过了,没问题。现在按钮是提交类型,我可以使用输入按钮发送表单。我按了 enter 2-3x,它只提交了一次表单。
    • 嗨@Dave599,是的,我想是的。听起来工作正常吗?
    • @Dave599 太棒了!没问题:)
    • Anbd 表单提交和按钮点击有什么区别?第一个为什么不多次发送表单,如果我多次单击按钮?
    【解决方案2】:

    您需要对按钮执行此操作:

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

    你需要在 javascript 中这样做:

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

    【讨论】:

      【解决方案3】:

      将您的 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');
                  }
              }));
      

      【讨论】: