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. HDFS NameNode 设计实现解析

    接前文 分布式存储-HDFS 架构解析,我们总体分析了 HDFS 架构的主要构成组件包括:NameNode.DataNode 和 Client.本文首先进一步解析 HDFS NameNode 的设计和 ...

  2. Ant 常用语法及选项

    project 项目定义,一个ant文件就是一个 project,定义了项目名称,起始位置以及默认执行的 target. <project name="Easily" bas ...

  3. OAuth 2.0 Threat Model and Security Considerations (rfc6819)

    Authorization server The following data elements are stored or accessible on the authorization serve ...

  4. &amp;&amp; 和 ||的区别

    如果&&左侧表达式的值为真值,则返回右侧表达式的值:否则返回左侧表达式的值. 如果||左侧表达式的值为真值,则返回左侧表达式的值:否则返回右侧表达式的值. 1       如果第一个操 ...

  5. Auto Mapper01

         在项目中一直在使用Auto Mapper技术,但是只是会简单的使用,对其里面的一些具体的细节和知识点不是很清楚,现在就跟着我从最基础的知识点来重新认识下,AutoMapper技术吧.     ...

  6. 0009《SQL必知必会》笔记05-表的创建与约束

    1.创建表:用CREATE TABLE 语句,要指明:表名(不能与现有表名重复).列名.每列的数据类型 CREATE TABLE product ( prod_id ), vend_id ), pro ...

  7. POJ1155TELE[树形背包]

    TELE Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4957   Accepted: 2726 Description ...

  8. 在linux下安装Python:

    # 下载最新版本 cd /usr/local/src/ sudo wget http://www.python.org/ftp/python/3.3.2/Python-3.3.2.tar.bz2 su ...

  9. Shell编程—定时任务

    应用:定时催收,定时下发,对新增内容入库同步, 时间:凌晨 服务器Reahat Linux: Bash HPUX:kbash? #!/bin/sh #!/bin/bash echo awk #输入重定 ...

  10. hdu 5294 最短路+最大流 ***

    处理处最短路径图,这个比较巧妙 链接:点我