1.form 中type 为submit 和button的区别

submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的行为,否则,将会造成提交两次的效果,对于动态网页来说,也就是对数据库操作两次。或者在使用submit时验证时加return true或false。
 
submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上,submit会提交表单,button不会提交表单.
两者主要区别在于:
submit默认为form提交,可以提交表单(form).
button则响应用户自定义的事件,如果不指定onclick等事件处理函数,它是不做任何事情.当然,button也可以完成表单提交的工作.
INPUT   type=submit 即发送表单,按回车提交表单   
INPUT   type=button 就是单纯的按钮功能,提交的是innerTEXT
 
 
2.本人所做的一个小实例

<form id="search-form" >
             <input type="text" name="keyword" placeholder="搜索明星名称"/>
             <input type="hidden" name="category" value="明星"/>
             <button type="button" onclick="changeKeyword(this);">搜索</button>
             </form> 

在按下这个按钮的时候并不想它直接提交,而是去执行一个函数。就可以这样写,把type改成button就会去执行函数.

这时候又遇到了另外一个问题,我想得到keyword里面输入的关键字该怎么办,解决方法。

function changeKeyword(elem){
        var $form = $(elem).parents("form");
        console.log($form.serialize());
    }

这个就会把整个form里面的值都打印出来。

如果要得到单个的值,也可以这样

function changeKeyword(elem){
         var val = $("input[name=keyword]").val();
        console.log(val);
    }

这样就可以得到keyword的值

关于button和form提交的一些问题的更多相关文章

  1. AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  2. jquery.validate+jquery.form提交的三种方式

    原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...

  3. 解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象

    之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...

  4. struts2中form提交到action中的中文参数乱码问题解决办法(包括取中文路径)

    我的前台页是这样的: <body>      <form action="test.action" method="post">     ...

  5. jquery.form.js实现将form提交转为ajax方式提交的使用方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...

  6. Extjs ajax form 提交

    1.form 提交 form.form.submit({ url: "/HandlerExcelToDB/UploadFile.ashx", params: {}, success ...

  7. 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  8. HttpWebRequest结合HtmlAgilityPack实现网页form提交

    年前一个项目,需要在某个系统实现系统自动操作. 系统页面使用form提交,页面参数较多,也参数设计一系列计算逻辑,改动一个值,其他值自动改变. 传统方法使用正则表达式匹配参数,构建post参数进行请求 ...

  9. spring MVC做form提交Neither BindingResult nor plain target object for bean name &#39;command&#39; available

    这两天在做spring3.0 MVC+hibernate3.2的练习中,做简单的form提交, 一直报java.lang.IllegalStateException: Neither BindingR ...

随机推荐

  1. Canvas设置width与height 的问题!

    最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...

  2. Entity Framework &ndash; (复数)Plural and (单数)Singular 表名Table names

    By default, the Entity Framework will assume that all of the names of your tables in your database a ...

  3. Android中的接口回调技术

    Android中的接口回调技术有很多应用的场景,最常见的:Activity(人机交互的端口)的UI界面中定义了Button,点击该Button时,执行某个逻辑. 下面参见上述执行的模型,讲述James ...

  4. orcl的小技巧和分页

    1Oracle中查看所有用户语句 select * from dba_users 1.修改用户的密码 alter user 用户名 identified by 密码; 2.如何查询stuInfo表中自 ...

  5. php Hash Table(二) Hash函数

    哈希表最关键的几个方面有: 通过key访问(通过哈希函数计算出key) 映射到数据结构中(哈希表本身的存储结构) 映射的处理(冲突或者碰撞检测和处理函数) 理解PHP的哈希算法 一般来说对于整形索引进 ...

  6. Count Primes ----质数判断

    质数的判断 埃拉托斯特尼筛法: 算法的过程如下图所示: 我们从2开始遍历到根号n,先找到第一个质数2,然后将其所有的倍数全部标记出来,然后到下一个质数3,标记其所有倍数,依次类推,直到根号n,此时数组 ...

  7. HR函数学习01——创建组织单位

    创建组织单位: RH_OBJECT_CREATE REPORT ZLYHR01. DATA:LS_OBJ TYPE OBJEC, LV_STU TYPE GDSTR-SVECT, LV_TIT TYP ...

  8. css3动画 bug

    1. .myanimate{ transition-property: left;transition-duration: .3s;transition-timing-function: ease } ...

  9. Web前端开发Chrome插件

    参考:http://www.cnblogs.com/sosoft/p/3490481.html 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员 ...

  10. 【服务器防护】VPN的ip变更,导致无法连接服务器,解决方法【阿里云ECS】

    在阿里云的管理控制台,云服务器ECS - 对应服务器 - 选“管理” - “连接管理终端” 通过这个入口,可以进入Linux云服务器,修改防火墙限制的IP即可