onsubmit return false is not working

Question

The following script shows the error message correctly, but the form always submits whether confirm_shop_code() returns true or false . I tried in many ways to solve the bug but it still persists. I have to stop the form from submitting when it returns false , but allow it to submit when it returns true . Please can any one help me to solve this?

<h2 id="shop_data"></h2>
<!-- form -->
<form action="" class="form-horizontal form-label-left input_mask" method="post" onsubmit="return confirm_shop_code();">
    <div class="col-md-4 col-sm-4 col-xs-8 form-group">
        <input type="text" class="form-control" id="shop" name="code" value="<?php echo $account->code; ?>" placeholder="Enter Shop Code">

    </div>
</form>
<!-- validation script -->
<script>
        function confirm_shop_code(){
            var code=document.getElementById( "shop" ).value;

            if(code) {
                $.ajax({
                    type: 'post',
                    url: 'validations.php',
                    data: {
                        shop_code:code,
                    },

                    success: function (response) {
                        $( '#shop_data' ).html(response);

                        if(response=="OK") {
                            return true;    
                        } else {
                            return false;
                        }
                    }
                });
            } else {
                $( '#shop_data' ).html("");
                return false;
            }
        }    

    </script>

<!-- php code -->

<?php 
include "system_load.php";
$code = $_POST['shop_code'];
global $db;
$query = "SELECT code from accounts WHERE code='".$code."'";
$result = $db->query($query) or die($db->error);
$count = $result->num_rows;
if($count > 0) {
    echo "SHOP CODE already Exists";
} else {
    echo "OK";
}
exit;

?>

Answer 1

The reason it is submitting is because AJAX calls are asynchronous by default. I wouldn't suggest making it synchronous because this will block the rest of the javascript execution. Also, you are returning false from the success method of $.ajax . This is not in the same scope as the parent function and therefore does not also cause the parent function to return false . So in fact, your confirm_shop_code() function is not returning anything unless code is false and that's why your form is always being submitted, no matter what happens with the AJAX call.

I would recommend using jQuery to bind to the form's submit event and just disable form submitting with preventDefault() . First, just add an id attribute to the form (eg "yourform" ) and do something like:

$("form#yourform").submit(function(e) {
    e.preventDefault();
    var form = $(this);

    var code=document.getElementById( "shop" ).value;

    if(code) {
        $.ajax({
            type: 'post',
            url: 'validations.php',
            data: {
                shop_code:code,
            },

            success: function (response) {
                $( '#shop_data' ).html(response);
                if(response=="OK") {
                    form.unbind('submit').submit()
                }
            }
        });
    } else {
        $( '#shop_data' ).html("");
    }
});

Answer 2

You need to add async:false to your ajax code

function confirm_shop_code(){
    var code=document.getElementById( "shop" ).value;
    var stopSubmit = false;

    if(code) {
        $.ajax({
            type: 'post',
            url: 'validations.php',
            async:false,
            data: {
                shop_code:code,
            },

            success: function (response) {
                $( '#shop_data' ).html(response);

                if(response=="OK") {
                    stopSubmit = false;    
                } else {
                    stopSubmit = true;
                }
            }
        });
    } else {
        $( '#shop_data' ).html("");
        stopSubmit = true;
    }
    if(stopSubmit){
        return;
    }
} 

Answer 3

You should call return false; function on the click event of the submit button.

<button type="submit" id="submit" onclick="return false;" class="btn btn-primary col-4">Proceed</button>

or you can use:

document.getElementById("submit").addEventListener("click", function (e) {
//your logic here

//this return false will not work here     
return false;
//this will work
e.preventDefault();
            
});