JS中input表单隐藏域及其使用方法

一、表单隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式：

＜input type="hidden" name="..." value="..."＞

属性解释：

type=”hidden”定义隐藏域；

name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

value属性定义隐藏域的值

例如：

＜input type=”hidden” name=”ExPws” value=”dd”＞

其实说白了就隐藏域不在前台显视的,跟表单的元素一样.有名字有数值,只是在提交数据是不可见的

二、隐藏域的使用

隐藏域的使用，就是从表中取值ＩＤ值，或者别的变量值，但在页面中不显示，然后经过的递交到新一页，通过request.form(“隐藏域名的name”)取出值。

举例说明：

１、<input type=hidden name=coun value=<%=cc%>这里的隐藏域名为coun，值为<%=cc%>，假设前面cc=100的话，即值为100；

２、递交表单到新页面xx.asp；

３、在xx.asp页中，使用request.write request.form(“coun”)，则在页面中显示的值就是100

简单来说就是：想要提取上一页的某些信息，但在上一页又不能显示的这些东西就采用藏域

三、隐藏域的作用

1 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。

2 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。

3 有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick=”document.form.command.value=”xx”“然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。

4 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。

5 javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。

6 还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。

以上所述是小编给大家介绍的JS中input表单隐藏域及其使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS表单提交验证、input（type=number） 去三角 刷新验证码

    JS表单提交验证、input（type=number） 去三角 刷新验证码

    在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,代码,踩过的坑:注意点: 1.只有通过form里面的 <button type="submit" >提交</button>进行表单的提交才会触发form的onSubmit事件,如果是通过button的onclick事件进行表单提交则不会触发form的onSubmit事件 2. onSubmit事件的正确写法是:<form action="

  • javascript input输入框模糊提示功能的实现

    javascript input输入框模糊提示功能的实现

    javascript input输入框模糊提示功能的实现 主要用到了jQuery.autocomplete函数,定义好一个数组就可以用这个功能了,很方便. <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothne

  • Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

    把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o

  • 对于input 框限定输入值为浮点型的js代码

    在一些项目中,比如金额用到浮点型,对于input  限定可以参考以下 <input type="text" value="" onkeyup="only_num(this)" onblur="only_num(this)"> <script> function only_num(obj){ //得到第一个字符是否为负号 var num = obj.value.charAt(0); //先把非数字的都替换

  • JS验证input输入框（字母，数字，符号，中文）

    只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="r

  • js监听input输入框值的实时变化实例

    1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

  • JS获得多个同name 的input输入框的值的实现方法

    先看下基于JS代码实现input密码输入框输入密码变黑点密文.具体代码如下所示: html代码 <form id="login-form" method="post" onsubmit="return checkForm()"> 输入密码<input type="password" id="input-password"> <input type="hidden&qu

  • JS中input表单隐藏域及其使用方法

    一.表单隐藏域 隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 代码格式: <input type="hidden" name="..." value="..."> 属性解释: type="hidden"定义隐藏域: name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称: value属

  • JS中from 表单序列化提交的代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: // ----ajax begin $.ajax({ type: "POST", url: "../compRule/updateRuleById?tids="+compTableName_val+"&isReportName="+$('#isReport_update').val()+"&heji_add="+$('#heji_update').val()

  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

    Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

    本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

  • js获取form表单所有数据的简单方法

    js获取form表单所有数据的简单方法

    在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen

  • 浅谈JS验证表单文本域输入空格的问题

    在表单中验证输入的文本域字符是否为空格,即空字符串,通常需要去除字符两边的空格才可验证准确.否则如果连续输入多个空格键,仅凭 document.getElementById("name").value == ""  验证不出来的. 去除字符串两边的空格的方法,还要考虑浏览器的兼容问题. 一. trim() 方法 document.getElementById("name").value.trim()   该方式在 Chrome.Firefox 中

  • 详细分析使用AngularJS编程中提交表单的方式

    详细分析使用AngularJS编程中提交表单的方式

    在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

  • Yii框架中jquery表单验证插件用法示例

    Yii框架中jquery表单验证插件用法示例

    本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • JS组件Form表单验证神器BootstrapValidator

    JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • BootStrap中的表单大全

    表单 基础表单 对于表单中的input.textarea.select,一般我都会加上类"form-control",它设置元素的默认宽度为100%(并不是绝对,比如下述的内联表单).并且每个元素(包括label和待输入元素)都会加上"form-group".它的样式只有一个.margin-bottom:15px. <form action=""> <div class="form-group"> &l

  • mvc中form表单提交的三种方式(推荐)

    第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit" value="搜索&

随机推荐