在第一次 preventDefault 后使用 jquery 阻止表单提交不起作用

Question

我使用下面的脚本通过 check.php 的响应从数据库中获取一些数据，然后检查数据，如果一切正常，我想提交一个表单，否则阻止它。 #order_number 是我正在检查的字段（文本类型的输入），#seblod_form 是表单。 如果我不触发第二个 e.preventDefault 一切正常并且表单提交正常。当我触发第二个 e.preventDefault 表单不提交时，它会在 html 中得到一个忙类，即使 okToSubmit = true 表单也会不提交。有什么想法可以解决这个问题吗？

<script src="https://code.jquery.com/jquery-2.1.1.min.js">
 $(document).ready(function(){
     $( document ).on('keydown',function( e ) {
       if (e.keyCode == 13){
    e.preventDefault();  //prevent form submitting when user presses enter key
    return false;
       }
     });
    $( document ).on('keyup','#order_number',function( e ) {
        if (e.keyCode != 13){
            var value = $('#order_number').val();
            var okToSubmit = true;
            $.ajax({      
            type: "POST",                                
            url: 'check.php',            
            data: {order_number:value},  
            dataType: 'json',                                    
            success: function(data) {
              if (data['found'] != 'true' || data['ordernumberused'] == 'true'){
                 if (data['ordernumberused'] == 'true') {
                    $('#cck1r_form_order_number').append( $( "<div id='message' style='color:red;'>This order number is already used!!!</div>" ) );
                    okToSubmit = false;
                 }
                 else{
                     $('#message').remove();
                }
                 $('#order_number').css("border-color", "red");
             }
              else {
                 $('#order_number').css("border-color", "green");
                 okToSubmit = true;
                 alert(okToSubmit);
              }
              $('#seblod_form').submit(function(e){
                     if (!okToSubmit){
                        e.preventDefault();
                        return false;
                       }
                       else {
                           return true;
                       }
              });

            }//end success 
            });//end ajax
        }
    });
});


</script>

这是代码的更新版本：

        <script src="https://code.jquery.com/jquery-2.1.1.min.js">  </script> /*hack for invoices - receipts*/
<script>
 $(document).ready(function() {
 var okToSubmit = true;
 $('#seblod_form').submit(function(e) {
     if (!okToSubmit) {
         e.preventDefault();
         return false;
     } else {
         return true;
     }
 });

 $('input#submit').mousedown(function() {
    if(okToSubmit){
    $('#seblod_form').removeClass('busy');

 }
 });

   $('input#submit').mouseup(function() {
    if(okToSubmit){
    $('#seblod_form').submit();

 }
 });



 $(document).on('keydown', function(e) {
     if (e.keyCode == 13) {
         e.preventDefault(); //prevent form submitting when user presses enter key
         return false;
     }
 });
 $(document).on('keyup', '#order_number', function(e) {
     if (e.keyCode != 13) {
         var value = $('#order_number').val();

         $.ajax({
             type: "POST",
             url: 'http://eshop.wideservices.gr/check.php',
             data: {
                 order_number: value
             },
             dataType: 'json',
             success: function (data) {
                 if (data['found'] != 'true' || data['ordernumberused'] == 'true') {
                     if (data['ordernumberused'] == 'true') {
                        if (!$('div').is('#message')){
                         $('#cck1r_form_order_number').append($("<div id='message' style='color:red;'>This order number is already used!!!</div>"));
                        }
                         okToSubmit = false;
                     } else {
                         $('#message').remove();
                     }
                     $('#order_number').css("border-color", "red");
                 } else {
                     $('#order_number').css("border-color", "green");
                     okToSubmit = true;

                 }
             } //end success 
         }); //end ajax
     }
 });});


</script>

removeClass 似乎可以解决问题。

Answer 1

您尝试在每次键入键时附加到submit 事件。这显然是一个坏主意，因为每次连接时它都会使用它自己的函数范围值okToSubmit，这将同时导致真假调用。任何实例中的任何false 都会使其变为preventdefault()。

尝试在更高级别声明 okToSubmit 并仅连接一次 submit 事件。

例如

 $(document).ready(function () {
     var okToSubmit = true;
     $('#seblod_form').submit(function (e) {
         if (!okToSubmit) {
             e.preventDefault();
             return false;
         } else {
             return true;
         }
     });

     $(document).on('keydown', function (e) {
         if (e.keyCode == 13) {
             e.preventDefault(); //prevent form submitting when user presses enter key
             return false;
         }
     });
     $(document).on('keyup', '#order_number', function (e) {
         if (e.keyCode != 13) {
             var value = $('#order_number').val();
             okToSubmit = true;
             $.ajax({
                 type: "POST",
                 url: 'check.php',
                 data: {
                     order_number: value
                 },
                 dataType: 'json',
                 success: function (data) {
                     if (data['found'] != 'true' || data['ordernumberused'] == 'true') {
                         if (data['ordernumberused'] == 'true') {
                             $('#cck1r_form_order_number').append($("<div id='message' style='color:red;'>This order number is already used!!!</div>"));
                             okToSubmit = false;
                         } else {
                             $('#message').remove();
                         }
                         $('#order_number').css("border-color", "red");
                     } else {
                         $('#order_number').css("border-color", "green");
                         okToSubmit = true;
                         alert(okToSubmit);
                     }
                 } //end success 
             }); //end ajax
         }
     });
 });

另一个问题：

您将 jQuery 代码包含在外部 JavaScript 文件请求中。总之不要！。您不应该混合使用外部 JS 请求和内联脚本块，因为这不适用于所有浏览器（而且看起来非常糟糕）:)

例如

<script src="https://code.jquery.com/jquery-2.1.1.min.js"/>
<script type="text/javascript">
    ...your inline script code here...
</script>