jquery获取form表单input元素值的简单实例
一般取值方法
$("#id").val();
$("#id").attr("value");
//其中value是元素的属性名如<s:textfield id="cifName" key="cifName" name="#request.consBean.cifName" />的id,key,name属性。取到的值是属性后对应双引号里面的字符。
function saveConsumerValidate(){ var cifNo =$("#cifNo").val(); //jquery获取文本框值方法1 var cardType = $("#cardType").attr("value"); //jquery获取文本框值方法2 var cardNo = document.getElementById("cardNo").value;//DOM获取值方法
val(),val(val)方法atttr(name),atttr(key,value)方法和value属性
在用$("#id")来获得页面的input元素的时候,发现$("#id").value不能取到值
$("#intro")是一个jquery的选择器结果是id="intro" 的第一个元素,而不是HTML DOM getElementById() 方法的document.getElement
value是HTML DOM Text对象的一个属性,设置或返回文本域的 value 属性的值。
val()是jquery的获得或设置元素的 DOM 属性的操作方法。
val()方法:获得第一个匹配元素的当前值
取值:$("#id").val();|$("element元素").val();/下同
或者 $("#id")[0].value;
HTML 代码: <input type="text" value="some text"/> jQuery 代码: $("input").val();
val(val)方法:设置每一个匹配元素的值。
赋值:$("#id").val("new value");
或者 $("#id")[0].value = "new value";
HTML 代码: <input type="text"/> jQuery 代码: $("input").val("hello world!");
attr(name)方法:取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。
取值:$("#id").attr("value");
HTML 代码: <img src="test.jpg"/> jQuery 代码: $("img").attr("src"); 结果: test.jpg
attr(key,value)方法:为所有匹配的元素设置一个属性值。
赋值:$("#id").attr(attribute,value);
描述: 为所有图像设置src属性。 HTML 代码: <img/> <img/> jQuery 代码: $("img").attr("src","test.jpg"); 结果: [ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]
以上这篇jquery获取form表单input元素值的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
使用jQuery时Form表单元素ID和name命名大忌
在做自己的毕业设计的时候将自己的表单元素ID和name命名为了nodeName: 复制代码 代码如下: <form> <input type="text" name="nodeName" id="nodeName"> ........... </form> 在chrome浏览器下可以看到这么个错误: Uncaught TypeError: Object #<HTMLInputElement> has
-
jquery的attr方法禁用表单元素禁用输入内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti
-
jQuery复制表单元素附源码分享效果演示
我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示 下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr
-
实用jquery操作表单元素的简单代码
取下拉菜单选中项的文本: 获取和设置下拉菜单的值: 清空下拉菜单: 给下列菜单添加元素: 取单选框值: 单选或复选按钮的选择: 取复选框值: 判断单选或复选框是否被选中: 元素可用不可用: 判断元素可用不可用. 实用jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr(&
-
JQuery对表单元素的基本操作使用总结
select下拉列表onChange事件之JQuery实现: JQuery: $(document).ready(function () { $("#selectMenu").bind("change", function () { if ($(this).val() == "pro1") { $("#pro1").slideDown(); $("#pro2").slideUp(); } else if($
-
jQuery获取和设置表单元素的方法
jQuery提供了val()方法,使用它我们可以快速地获取和设置表单的文本框.单选按钮.以及单选按钮的值.使用val()不带参数,表示获取元素的值使用val()给定参数,则表示把值赋给元素 如下: 复制代码 代码如下: //获取值alert($("input#mytextbox").val());alert($("select#mylist").val());alert($("input#myradio").val()); //设置值$(&quo
-
jQuery实现form表单元素序列化为json对象的方法
本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&
-
jquery序列化表单去除指定元素示例代码
复制代码 代码如下: <html> <head> </head> <body> <form name="form1"> <input type="hidden" name="page1" class="flau_u_ro" value="1"></input> <input type="hidden"
-
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d
-
jquery获取form表单input元素值的简单实例
一般取值方法 $("#id").val(); $("#id").attr("value"); //其中value是元素的属性名如<s:textfield id="cifName" key="cifName" name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sav
-
jQuery实现获取form表单内容及绑定数据到form表单操作分析
本文实例讲述了jQuery实现获取form表单内容及绑定数据到form表单操作.分享给大家供大家参考,具体如下: 在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单: 获取表单的数据:$("#formid").serializeJson(); 绑定数据到表单:$("#formid").setForm(js
-
vue获取form表单的值示例
这里使用的是Element-ui组件 html: <el-input placeholder="请输入手机号" id="phone" prop="phone" v-model="phone" clearable></el-input> JS: var phone = this.phone; var password = this.password; var that = this; var phone
-
jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!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.o
-
jQuery实现form表单基于ajax无刷新提交方法实例代码
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!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.o
-
js form表单input框限制20个字符,10个汉字代码实例
直接粘贴到html文件便可看到效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-widt
-
jQuery扩展方法实现Form表单与Json互相转换的实例代码
JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.toJson = function () { var self = this, json = {}, push_counters = {}, patterns = { "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\]
-
js获取form表单所有数据的简单方法
在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen
-
jQuery序列化form表单数据为JSON对象的实现方法
jquery提供的serialize方法能够实现. $("#searchForm").serialize(); 但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串. serialize确实是能够解决一般的提交数据.但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象). 方法如下: (function(window, $) { $.fn.serializeJs
随机推荐
- Android普通对话框用法实例分析
- PHP 事务处理数据实现代码
- JS中对Cookie的操作详解
- PHP中ini_set和ini_get函数的用法小结
- 微信小程序 安全包括(框架、功能模块、账户使用)详解
- 令按钮悬浮在(手机)页面底部的实现方法
- Python中index()和seek()的用法(详解)
- 异步的SQL数据库封装详解
- 使用sp_xml_preparedocument处理XML文档的方法
- JavaScript Timer实现代码
- regasm与regsvcs区别
- Java对日期Date类进行加减运算、年份加减月份加减、时间差等等
- ISA Server 的故障排除工具(2)
- JS获取Table中td值的方法
- Android 蓝牙开发实例解析
- spring事务异常回滚实例解析
- Flask和Django框架中自定义模型类的表名、父类相关问题分析
- Laravel框架实现多数据库连接操作详解
- 关于js陀螺仪的理解分析
- python opencv实现运动检测