onsubmit返回false无效 [英] onsubmit return false is not working

问题描述

以下脚本正确显示了错误消息，但是表单始终提交confirm_shop_code()返回true还是false.我尝试了多种方法来解决该错误，但该错误仍然存​​在.我必须停止在表单返回false时提交表单，但允许表单在返回true时提交表单.请问有人可以帮我解决这个问题吗?

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;

?>

推荐答案

它提交的原因是因为AJAX调用默认情况下是异步的.我不建议使其同步，因为这将阻止其余的javascript执行.另外，您正在从$.ajax的success方法返回false.这与父函数不在同一范围内，因此也不会导致父函数返回false.因此，实际上，除非code为false，否则您的confirm_shop_code()函数不会返回任何内容 ，这就是为什么无论AJAX调用发生什么，总是提交您的表单的原因.

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.

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

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 (e.g. "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("");
    }
});

这篇关于onsubmit返回false无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！