表单元素值获取方式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的试卷自动排版系统实现代码
Jan 06 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
代码整洁之道(重构)
Oct 25 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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 array的学习笔记
2012/05/10 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
angular4自定义组件详解
2017/09/28 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python中请使用isinstance()判断变量类型
2014/08/25 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
Python实现最大子序和的方法示例
2019/07/05 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
南京青奥会口号
2014/06/12 职场文书
公证委托书标准格式
2014/09/11 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python