表单元素值获取方式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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP memcache扩展的三种安装方法
2009/04/26 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
js实现网页收藏功能
2015/12/17 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
python实现简单http服务器功能
2018/09/17 Python
详解Django的CSRF认证实现
2018/10/09 Python
用Python解决x的n次方问题
2019/02/08 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
职工趣味运动会方案
2014/02/10 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
倡议书范文
2014/04/16 职场文书
品质标语大全
2014/06/21 职场文书
故宫英文导游词
2015/01/31 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
实例讲解Python中sys.argv[]的用法
2021/06/03 Python