2017-01-28 21 views
1

私はこのフォームを持っていますが、ユーザーがそれを送信すると、たまに1回だけでなく2,3回〜4回以上送信されることもあります。ajaxフォームを1回だけ送信してください

私はボタンを無効にしますが、それは問題を解決しませんでした。

Whats going on wrong?私は何も考えていない、これと何をするか。無効になっているボタンで解決できない場合はどうなりますか?

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

答えて

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

こんにちは!私は変更を必要とするだけですか?私はそれを試しました、大丈夫です。そしてボタンが送信タイプであるので、私は入力ボタンでフォームを送ることができます。私は2-3倍の入力をプッシュし、一度だけフォームを提出しました。 – Dave599

+0

こんにちは@ Dave599、そうですね。それはうまく動いているように聞こえる? –

+0

はい、あなたの答えを受け入れます。ありがとう! – Dave599

1

あなたがボタンにこれを実行する必要があります:

<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 
    })  
}) 
0

すると、次のようにあなたの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'); 
      } 
     })); 
関連する問題