表单元素值获取方式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 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
轻松搞定js表单验证
Oct 13 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
Vue中keep-alive组件作用详解
Feb 04 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中文转拼音的实现代码
2014/02/11 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python类及获取对象属性方法解析
2020/06/15 Python
Python Map 函数的使用
2020/08/28 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
人事专员的岗位职责
2014/03/01 职场文书
厨房管理计划书
2014/04/27 职场文书
学生个人评语大全
2015/01/04 职场文书
货款欠条范本
2015/07/03 职场文书
治庸问责工作总结
2015/08/11 职场文书
如何在Python中创建二叉树
2021/03/30 Python
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS