使用jquery来阻止表单提交在第一个preventDefault之后就不起作用了

Using jquery to prevent form from submitting does not work after the first preventDefault

本文关键字:之后 preventDefault 不起作用 第一个 jquery 表单提交 使用      更新时间:2023-09-26

我使用下面的脚本通过check.php的响应从数据库中获取一些数据,然后检查数据,如果一切都好,我想提交一个表单,否则阻止它。#order_number是我正在检查的字段(输入类型文本)和#seblod_form是表单。如果我不触发第二个e.c preventdefault,一切工作正常,表单提交ok。当我触发第二个e.c preventdefault时,表单不提交,它在html中得到一个busy类,即使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>

每次键入一个键时,您都试图附加到submit事件。这显然是一个坏主意,因为每次你连接它将使用它自己的okToSubmit的函数作用域值,这将导致true和false调用在同一时间。任何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>