表单元素值获取方式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的设计模式
Nov 22 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
javascript闭包入门示例
Apr 30 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 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 获取百度的热词数据的代码
2012/02/18 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
pyspark 随机森林的实现
2020/04/24 Python
python输入中文的实例方法
2020/09/14 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
大学生思想汇报范文
2013/12/31 职场文书
年度考核自我鉴定
2014/03/19 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
法律顾问服务方案
2014/05/15 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers