表单提交刷新页面问题

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

<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 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

使用scrapy爬取sebug漏洞库

微信号:freebuf 由于项目需要抓取sebug的漏洞库内容,就利用scrapy框架简单写了个抓取sebug的爬虫,并存入数据库,mysql或mongodb,...

1976
来自专栏林冠宏的技术文章

全面总结: Golang 调用 C/C++,例子式教程

作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:htt...

5415
来自专栏IT派

静态站点生成器:makesite.py

通过在Python中编写自己的简单、轻量级、无魔法的静态站点生成器,完全控制静态网站/博客生成。对的!重新发明轮子,伙计们!

943
来自专栏夏时

用PHP读写文本文档制作最简单的访问计数器

942
来自专栏腾讯移动品质中心TMQ的专栏

Jest基本使用方法以及mock技巧介绍

Jest是由Facebook开发并维护的一套js的单元测试框架,之前在后台的nodejs项目里面第一次尝试使用,感觉还是非常容易上手的,功能也比较强大。

3304
来自专栏Android群英传

Kotlin Primer·启程

983
来自专栏从零开始学自动化测试

Selenium2+python自动化60-异常后截图(screenshot)

前言 在执行用例过程中由于是无人值守的,用例运行报错的时候,我们希望能对当前屏幕截图,留下证据。 在写用例的时候,最后一步是断言,可以把截图的动作放在断言这里,...

3355
来自专栏林冠宏的技术文章

全面总结: Golang 调用 C/C++,例子式教程

Golang 调用 C/C++ 的教程网上很多,就我目前所看到的,个人见解就是比较乱,坑也很多。希望本文能在一定程度上,做到更通俗明了。

872
来自专栏Django中文社区

评论

创建评论应用 相对来说,评论其实是另外一个比较独立的功能。Django 提倡,如果功能相对比较独立的话,最好是创建一个应用,把相应的功能代码写到这个应用里。我们...

2696
来自专栏北京马哥教育

15分钟学会shell脚本,最简明的教程在这里

本文由马哥教育M23期学员推荐,转载自互联网,作者为Hnongy,感谢作者的辛苦付出和贡献。 Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的...

2777

扫码关注云+社区