表单元素值获取方式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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
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
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
python实现下载文件的三种方法
2017/02/09 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python编写猜数字小游戏
2019/10/06 Python
python画微信表情符的实例代码
2019/10/09 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
企业门卫岗位职责
2013/12/12 职场文书
岗位职责风险点
2014/03/12 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
平安建设汇报材料
2014/12/29 职场文书
职工食堂管理制度
2015/08/06 职场文书
2015中秋祝酒词
2015/08/12 职场文书
音乐研修感悟
2015/11/18 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL