表单元素值获取方式js及java方式的简单实例


Posted in Javascript onOctober 15, 2016

大家都知道我们在提交form的时候用了多种input表单。可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的。有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢?

多说无用、上代码:

Jsp-html代码: 

<form action="input.do" name="formkk"> 
  <table> 
<tbody> 
  <tr> 
 
<td>text:</td> 
<td> 
  <input type="text" name="text"> 
</td> 
  </tr> 
  <tr> 
 
<td>password:</td> 
<td> 
  <input type="password" name="pass"> 
</td> 
  </tr> 
  <tr> 
 
<td>radio:</td> 
<td> 
  <input type="radio" name="xingbie" value="1"> 
  男 
  <input type="radio" name="xingbie" value="2"> 
  女 
</td> 
  </tr> 
  <tr> 
<td>checkbox:</td> 
<td> 
  足球:<input type="checkbox" name="hobby" value="1" /> 
  篮球:<input type="checkbox" name="hobby" value="2" /> 
  拍球:<input type="checkbox" name="hobby" value="3" /> 
  斗球:<input type="checkbox" name="hobby" value="4" /> 
</td> 
  </tr> 
  <tr> 
<td>hidden:</td> 
<td> 
  <input type="hidden" value="123" name="hidden"/> 
</td> 
  </tr> 
  <tr> 
<td>option:</td> 
<td> 
  <select name="opt" id="opt"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option> 
  </select> 
   
</td> 
</tbody> 
  </table> 
  <input type="button" value="提交" onclick="javascript:check()"/> 
</form>

Javascript: 

function check(){ 
   
  var radio = document.getElementsByName("xingbie"); 
  var checkbox = document.getElementsByName("hobby"); 
  var select = document.getElementById("opt"); 
 
  //获取select标签 
  var index = select.selectedIndex; 
  var text = select.options[index].text; 
  var value = select.options[index].value; 
   
  //获取radio标签 
  for(var i=0;i<xingbie.length;i++){ 
if(xingbie.item(i).checked){ 
  var val = xingbie.item(i).getAttribute("value"); 
  break; 
} 
continue; 
  } 
  //获取checkbox标签 
  for(var i=0;i<hobbys.length;i++){ 
if(hobbys[i].checked){ 
  alert(hobbys[i].value); 
} 
continue; 
  } 
   
  //提交form表单 
  document.formkk.submit(); 
   
   
}

Java: 

String[] hobbys = request.getParameterValues("hobby"); //checkbox 
String text = request.getParameter("text"); //text 
String password = request.getParameter("password"); //password 
String xingbie = request.getParameter("xingbie");  //radio 
request.getParameter("hidden"); 
request.getParameter("opt");//select

以上就是小编为大家带来的表单元素值获取方式js及java方式的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
微信小程序入门教程
Nov 18 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
工作中常用js功能汇总
Nov 07 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 #Javascript
原生JS实现的放大镜效果实例代码
Oct 15 #Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 #Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 #Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 #Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 #Javascript
jQuery ajaxForm()的应用
Oct 14 #Javascript
You might like
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
PHP防注入安全代码
2008/04/09 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
php之可变函数的实例详解
2017/09/13 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
python多线程方式执行多个bat代码
2016/06/07 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python生成特定分布数的实例
2019/12/05 Python
python 项目目录结构设置
2020/02/14 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2015年领班工作总结
2015/04/29 职场文书
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js