bootstrap表单按回车会自动刷新页面的解决办法

想给form表单增加回车自动提交的功能

$('#password').keydown(function(event){
    if (event.keyCode == 13) $('#login').click();
  });

然而，并没有达到预期的效果，而是自动刷新了表单，并将表单参数放在了url后面,如图

发现是是form标签的问题，将其改为div

问题解决，原因应该是form表单按enter会自动提交的原因。

赞 (0)

相关推荐

  • BootStrap mvcpager分页样式(get请求,刷新页面)

    BootStrap mvcpager分页样式(get请求,刷新页面)

    使用方法: 先把mvcpager.dll引用加入mvc项目中. 前台代码 前台: @{ Layout = null; } @using Webdiyer.WebControls.Mvc @model PagedList<string> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <

  • bootstrap表单按回车会自动刷新页面的解决办法

    bootstrap表单按回车会自动刷新页面的解决办法

    想给form表单增加回车自动提交的功能 $('#password').keydown(function(event){ if (event.keyCode == 13) $('#login').click(); }); 然而,并没有达到预期的效果,而是自动刷新了表单,并将表单参数放在了url后面,如图 发现是是form标签的问题,将其改为div 问题解决,原因应该是form表单按enter会自动提交的原因.

  • layui form表单提交后实现自动刷新

    刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪怕是button标签呢,也不行.我试了一下,使用这种情况的话,主要是在监听事件中并没有返回return false,如果返回了return false,这个就可以不再刷新. 2.提交表单,获取不到form表单中的数据. 有人说,是因为给了一个id,并没有给name属性,用惯了jquery.我懒得去找

  • element 结合vue 在表单验证时有值却提示错误的解决办法

    绑定的值与规则指定的值一定要相同------- 第一步: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 加上rules ref 第二部: <el-form-item label="活动名称" prop="na

  • jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法

    序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 原因:.serialize()自动调用了encodeURIComponent方法将数据编码了 解决方法:调用decodeURIComponent(XXX,true);将数据解码 例如: var params = jQuery("#formId").serialize(); // http request parameters. params = deco

  • BootStrap 智能表单实战系列(十)自动完成组件的支持

    BootStrap 智能表单实战系列(十)自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需要将产品的编号.产品的名称.产品的单价.产品的备注信息等填写会表单中的某个位置 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成

  • Form表单按回车自动提交表单的实现方法

    1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交. <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 如果不想让其自动提交可以这样做: 再添加一个<input type=

  • Bootstrap 表单验证formValidation 实现表单动态验证功能

    Bootstrap 表单验证formValidation 实现表单动态验证功能

    动态添加input并动态添加新验证方式! init状态: 点击"+"后: 验证后: 知识点: 1 先去官网下载:http://formvalidation.io/ 2 导入文件,注意事项我就不多说了在远程验证那篇我已经讲过. 3 用到的关键字:addField.removeField.different 4注意一点就是官网里的例子他们的name是不一样的.我这里比较偷懒.且项目ajax的时候不是用的form表单提交,而是自己并接成json提交,所以x,y的name的名字一样. 好开始:

  • Bootstrap表单使用方法详解

    Bootstrap表单使用方法详解

    一.表单布局 Bootstrap 提供了下列类型的表单布局: --垂直表单(默认) --内联表单 --水平表单 (1)垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式. 下面列出了创建基本表单的步骤: --向父 <form> 元素添加 role="form". --把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. --向所有的文本元素 <input&

  • 全面解析Bootstrap表单使用方法（表单控件状态）

    全面解析Bootstrap表单使用方法（表单控件状态）

    一.焦点状态 焦点状态是通过伪类":focus"来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果. <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="

  • 第四章之BootStrap表单与图片

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各种丰富的效果. 一．表单 Bootstrap 提供了一些丰富的表单样式供开发者使用. 1.基本格式 //实现基本的表单样式 <form> <div class="form-gr

随机推荐