Form 表单中只有一个 input 元素时按回车会默认提交表单。有的时候我们希望按回车可以进行列表查询，但是查询后表单被自动提交了，然后刷新了整个页面。这个时候就需要对这个 Form 表单处理一下以满足在只有一个 input 元素时也能回车查询。

基本表单如下:

<html>

    <head></head>

    <body>

        <form action='XXX' name='searchForm' method='post'>

           查询: <input type='text' />

        </form>

    </body>

</html>

解决方法有以下几种：

1.添加一个无用的 input 框

<input type='text' style='display: none;' />

2.阻止表单的回车键进行提交

<form action='XXX' name='searchForm' method='post' onsubmit='return false'>

date: 2018-02-27 11:18:05

本文由个人 hexo 博客 co2fe.com 迁移

遇到的一个Form表单自动提交问题解决办法的更多相关文章

  1. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. 按Enter键后Form表单自动提交的问题

    怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...

  3. form表单自动提交

    form表单提交是web项目中经常遇到的,但是如果form中只有一个input为text类型的输入框时, 需要格外注意,因为这时候只要你按下回车键,form表单就会自动提交,这是form表单的一个特性 ...

  4. （转）一个form表单实现提交多个action

    方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

  5. FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别

    在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...

  6. 直接提交一个form表单后台返回一个新页面通过target属性可以放到iframe当中

    问题描述: 我想提交一个form表单后台直接返回一个新页面,但是当前页面还不想被替换掉: 解决方案: 在页面中添加一个iframe将form表单的target属性设置为iframe的id这样的话返回的 ...

  7. 获取html 中的内容 将前台的数据获取到后台 用 jquery 生成一个 form表单 提交数据

    使用js创建一个form表单 ,使用post上传到后台中 下面是代码.在获取html内容的时候使用了js节点来获取内容. parent:父节点.上一级的节点 siblings:兄弟节点.同一级别的节点 ...

  8. 按下enter键后表单自动提交问题

    在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...

  9. Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...

随机推荐

  1. Codeforces Gym101502 A.Very Hard Question

    2017 JUST Programming Contest 3.0 昨天的训练赛,打的好难过,因为被暴打了,写了8题,他们有的写了9题,差了一道dp,博客上写7道题的题解. 因为有一道是套板子过的,并 ...

  2. JavaScript 中那些关于坐标和距离的属性与方法

    一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少时间精力,于是便有了整理记录的想法,即加深了印象,又 ...

  3. Java爬虫系列二：使用HttpClient抓取页面HTML

    爬虫要想爬取需要的信息,首先第一步就要抓取到页面html内容,然后对html进行分析,获取想要的内容.上一篇随笔<Java爬虫系列一:写在开始前>中提到了HttpClient可以抓取页面内 ...

  4. va_list 简介

    原文:http://blog.sina.com.cn/s/blog_590be5290100qhxr.html va_list是一个宏,由va_start和va_end界定. typedef char ...

  5. C# 生成二维码(带Logo)

    C# 生成二维码(带Logo) 第一种方式 我们需要引用 ThoughtWorks.QRCode.dll  生成带logo二维码(framework4.0以上) 下载地址:https://pan.ba ...

  6. mybatis-plus generator template 中的全部属性

    { "date": "2018-10-30", "superServiceImplClassPackage": "com.baom ...

  7. mysql存储过程命令行批量插入N条数据命令

    原文:http://blog.csdn.net/tomcat_2014/article/details/53377924 delimiter $$ create procedure myproc () ...

  8. 【java】RC4加密转16进制获取长度为40的不重复优惠码字符串 【未优化版本】

    需求:需要一串给各机构独有的优惠码 间接需求:固定长度.不重复.没有规律可循 实现思想如下: 1.首先获取一个UUID 2.去除UUID中的“-” 3.小写转大写 4.获取一个固定长度字符串 5.按照 ...

  9. 使用 sftp 向linux服务器传输文件

    sftp是加密的文件传输. 登陆 sftp name@123.21.331.1 1 2.把本地文件name1传到服务器name2下 put /name1.html /name2/ 1 把服务器name ...

  10. css3 - target

    通过CSS3伪元素target,我们可以实现拉风琴 源码 <!DOCTYPE HTML> <html lang="en-US"> <head> ...