表单元素值获取方式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中变量相关的细节分析
Aug 13 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 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
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
python 多线程重启方法
2019/02/18 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
python 魔法函数实例及解析
2019/09/25 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
个人收入证明范本
2014/01/12 职场文书
小区停车场管理制度
2014/01/27 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
大学四年个人自我小结
2014/03/05 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
政治表现评语
2014/05/04 职场文书
治超工作实施方案
2014/05/04 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
总结Python变量的相关知识
2021/06/28 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript