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

Question

I use the below script to get some data from a database through the response of check.php and then check the data and if all is good i want to submit a form , else prevent it. #order_number is the field i am checking (input of type text) and #seblod_form is the form. If i dont trigger the second e.preventDefault everything works fine and the form submits ok.When i trigger the second e.preventDefault the form does not submit, it gets a class of busy in the html and even if okToSubmit = true the form does not submit. Any ideas how can i fix this?

<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>

This is the updated version of the code:

        <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>

The removeClass seems to do the trick.

Answer 1

You are trying to attach to the submit event every single time you type a key. That is obviously a bad idea as each time you connect it will use it's own function-scoped value of okToSubmit which will will result in true and false calls at the same. Any false in any instance will cause it to preventdefault() .

Try declaring okToSubmit at a higher level and hook up the submit event only once.

eg

 $(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
         }
     });
 });

The other issue:

You are including your jQuery code inside an external JavaScript file request. In a word DON'T! . You should not mix external JS requests and inline script blocks as that will not work on all browsers (and looks really bad) :)

eg

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