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的{{1}}方法返回success。这与父函数不在同一范围内，因此也不会导致父函数返回$.ajax。因此，实际上，除非false为假，否则您的confirm_shop_code()函数不会返回任何内容，这就是为什么无论AJAX调用发生什么，总是提交您的表单的原因。 / p>

我建议使用jQuery绑定到表单的Submit事件，并仅禁用使用code提交表单。首先，只需在表单中添加一个preventDefault()属性（例如id），然后执行以下操作：

"yourform"

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

Answer 3

您应该在提交按钮的点击事件上调用 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();
            
});

onsubmit返回false不起作用

3 个答案: