onsubmit 返回 false 不起作用

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

你应该在提交按钮的点击事件上调用return false;函数。

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

或者你可以使用：

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

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

Answer 2

它提交的原因是因为 AJAX 调用默认是异步的。我不建议让它同步，因为这会阻止其余的 javascript 执行。此外，您将从$.ajax 的success 方法返回false。这与父函数不在同一范围内，因此也不会导致父函数返回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 3

您需要将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;
    }
}