时间戳

首页 > 解决方案 > 使用 setTimeout 提交表单未按预期工作

javascript - 使用 setTimeout 提交表单未按预期工作

问题描述

我在提交事件处理程序中根据条件和 setTimeout 语句提交表单，但是即使我在 setTimeout 函数中设置 return false，表单仍然会被提交。

bool = true;
$('.form-example').submit(function(e) { 
    //some_stuff where I am get a value true or false in variable bool
    setTimeout(function () {      
        if(bool) {    
            console.log('form shouldnt submit coz the following statement is return false');
            return false; 
        }else{
            return true;
        }
    }, 1000);           
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" method="post" class="form-example">
        <div class="form-example">
            <label for="name">Enter your name: </label>
            <input type="text" name="username" id="username" required> 
        </div>
        <input type="submit" name="submit_user">
    </form>

标签： javascripthtmljqueryformssubmit

解决方案

e.preventDefault()仅当您不想提交表单时才应使用。

var bool = false;
$('.form-example').submit(function(e) { 
    //some_stuff where I am get a value true or false in variable bool
    if(bool) {    
        alert('Not submit');
         e.preventDefault();
         return false; 
    } else {
         alert('Submit');
        return true;
    }         
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" class="form-example">
        <div class="form-example">
            <label for="name">Enter your name: </label>
            <input type="text" name="username" id="username" required> 
        </div>
        <input type="submit" name="submit_user">
    </form>

推荐阅读