表单元素值获取方式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 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
javascript事件冒泡实例分析
May 13 Javascript
动态加载js文件简单示例
Apr 21 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
vue实现菜单切换功能
May 08 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代码运行时间查看类代码分享
2011/08/06 PHP
PHP 图片水印类代码
2012/08/27 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python functools模块学习总结
2015/05/09 Python
python简单实现刷新智联简历
2016/03/30 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Scrapy的简单使用教程
2017/10/24 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
python线程里哪种模块比较适合
2020/08/02 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
世界读书日的活动方案
2014/08/20 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js