HTML Form中button自动刷新页面

在html的form中定义button的时候,如果不加上type="button"属性,会出现执行完事件后自动刷新当前页面的情况,
比如这样 的代码:
<form class="form form-horizontal" id="queryForm" >
            <div class="row cl">
                <label class="form-label col-sm-3">服务号码:</label>
                <div class="formControls col-sm-4">
                    <input type="text" class="input-text" placeholder="输入手机号码" id="cellNo" name="cellNo">
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-sm-4 col-sm-offset-3">
                    <button class="btn btn-success radius" id="queryBtn">查询</button>
                </div>
            </div>
        </form>
 其实用chrome开发工具调试的时候就发现了一个怪异的情况,点击完“查询”按钮后,在Sources页面会出现 “query?cellNo=” 这样开头的页面, 这说明它把整个form表单提交了,而不是单单的一次按钮click。
解决办法就是加上type="button":
<button type="button" class="btn btn-success radius" id="queryBtn">查询</button>


猜你喜欢

转载自blog.csdn.net/kxiaozhuk/article/details/79279501