提问者:小点点

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


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


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

您正在外部JavaScript文件请求中包含jQuery代码。总之,不要!。您不应该混合使用外部JS请求和内联脚本块,因为这在所有浏览器上都不起作用(而且看起来非常糟糕):)

例如。

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