возврат на ложь не работает

Question

Следующий скрипт правильно показывает сообщение об ошибке, но форма всегда сообщает, возвращает ли confirm_shop_code() true или false. Я пытался разными способами устранить ошибку, но она все еще сохраняется. Я должен остановить отправку формы, когда она возвращает false, но разрешить ее отправку, когда она возвращает true. Пожалуйста, кто-нибудь может помочь мне решить эту проблему?

<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

Причина, по которой он отправляется, заключается в том, что вызовы AJAX по умолчанию асинхронны. Я бы не советовал делать это синхронно, потому что это заблокирует остальную часть выполнения javascript. Кроме того, вы возвращаете false из success метода $.ajax. Это не находится в той же области видимости, что и родительская функция, и, следовательно, также не заставляет родительскую функцию возвращать false. Фактически, ваша confirm_shop_code() функция не возвращает что-либо , если code не ложно, и именно поэтому ваша форма всегда отправляется, независимо от того, что происходит с вызовом AJAX.

Я бы порекомендовал использовать jQuery для привязки к событию отправки формы и просто отключить отправку формы с помощью preventDefault(). Во-первых, просто добавьте атрибут id в форму (например, "yourform") и сделайте что-то вроде:

$("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

Вам необходимо добавить async:false к вашему Ajax-коду

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