表单元素值获取方式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客户端脚本的设计和应用
Aug 21 Javascript
JS backgroundImage控制
May 19 Javascript
Javascript 面向对象 继承
May 13 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
微信支付扫码支付php版
2016/07/22 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
Python中Class类用法实例分析
2015/11/12 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
python发送邮件脚本
2018/05/22 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
学习雷锋精神演讲稿
2014/05/10 职场文书
医学专业大学生求职信
2014/07/12 职场文书
暑期学习心得体会
2014/09/02 职场文书
小学元宵节活动总结
2015/02/06 职场文书
法律意见书范文
2015/06/04 职场文书
任命书格式模板
2015/09/22 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers