表单元素值获取方式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 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
JavaScript 数组详解
Oct 10 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
vue自定义filters过滤器
Apr 26 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
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
用文本作数据处理
2006/10/09 PHP
人大复印资料处理程序_输入篇
2006/10/09 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
php显示页码分页类的封装
2017/06/08 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Angular实现form自动布局
2016/01/28 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
django迁移文件migrations的实现
2020/03/31 Python
python自定义函数def的应用详解
2020/06/03 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
C#面试题问题集
2016/04/02 面试题
优质服务口号
2014/06/11 职场文书
医德医风自我评价
2014/09/19 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
拖欠货款起诉状
2015/05/20 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Java版 简易五子棋小游戏
2022/05/04 Java/Android