表单提交刷新页面问题

今天开发中遇到了一个问题,刚开始没有头绪,不知道怎样解决,后来静下来一想,搜索下吧,经过搜索相关资料,很好的解决。

<form name="keywordForm" method="post" action=""> <p id="profile_nav"> <label for="profile"> 关键字搜索: </label> <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" /> <input type="button" value="搜索" onClick="searchKeyword()"> </p> </form>

在文本框中输入关键字按回车,页面自动刷新了,结果肯定是没有实现无刷新搜索了。想了想,可能是按回车后默认提交了表单,于是将form去掉,果然不刷了。但是还是会有很多地方需要用到form。

一个表单下,如果只有一个文本框时,按下回车将会触发表单的提交事件。

既然是只有一个文本框才会出问题,那么可以加一个隐藏的文本框,如下:

现在代码成了这样:

<form name="keywordForm" method="post" action=""> <p id="profile_nav"> <label for="profile"> 关键字搜索: </label> <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" /> <input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" /> <input type="button" value="搜索" onClick="searchKeyword()"> </p> </form>

结论是,可以采取两种方法解决这种问题:1.去掉表单;2.如果非得用表单,只要不让表单里有且只有一个文本框就OK了。

如果以上的方法还不足以让你去解决问题,那么你可以用以下方法来阻止因为回车而引起的表单自动提交:

<form name="keywordForm" method="post" action="" onsubmit="return false;"> <p id="profile_nav"> <label for="profile"> 关键字搜索: </label> <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" /> <input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" /> <input type="button" value="搜索" onClick="searchKeyword()"> </p> </form>

就是在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交。

注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页

知识在于积累,相信坚持的力量

原文发布于微信公众号 - php(phpdaily)

原文发表时间:2015-07-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

spring profile 多环境配置管理

本地、测试、开发、产品等不同环境文件配置 现象   如果在开发时进行一些数据库测试,希望链接到一个测试的数据库,以避免对开发数据库的影响。   开发时的某些配...

33911
来自专栏炉边夜话

在Debian中打造属于自己的deb包

问题:如果你要在Debian系统中发布一款软件或者一个包,该如何做呢?如果你的项目中有各种二进制包,该如何维护呢?如果你自己做了一款小小的实用软件,该如何与朋友...

872
来自专栏用户画像

Mysql常用命令行大全

键入命令mysql -u root -p, 回车后提示你输入密码,输入12345,然后回车即可进入到mysql中了,mysql的提示符是:

732
来自专栏java系列博客

国家网络与信息安全信息通报中心紧急通报

1986
来自专栏用户2442861的专栏

HTTP POST GET 本质区别详解

    一般在浏览器中输入网址访问资源都是通过GET方式;在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交

341
来自专栏吾爱乐享

php学习之html属性-表单(五)

902
来自专栏技术总结

App在后台运行的思与做

1417
来自专栏十月梦想

node之npm使用

在cmd中,使用npm init可以初始化一个package.json文件,用回答问题的方式生成一个新的package.json文件。

552
来自专栏前端小叙

微信公众号复制的图片可以正常显示的办法

通过浏览多方文章,找到了一个 非常好用但是也有很大的坑的办法: 在页面中加meta: <meta name="referrer" content="never"...

6488
来自专栏向治洪

TCP/IP滑动窗口

T C P使用一种窗口(w i n d o w)机制来控制数据流。当一个连接建立时,连接的每一端分配一个缓冲区来保存输入的数据,并将缓冲区的尺寸发送给另一端。...

1905

扫描关注云+社区