Javascript和Java获取各种form表单信息的简单实例


Posted in Javascript onFebruary 14, 2014

大家都知道我们在提交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
Javascript 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
详解Node 定时器
Feb 26 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
vue中的inject学习教程
Apr 24 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
jquery中交替点击事件的实现代码
Feb 14 #Javascript
javascript获取form里的表单元素的示例代码
Feb 14 #Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 #Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 #Javascript
jQuery获取和设置表单元素的方法
Feb 14 #Javascript
javascript生成json数据简单示例分享
Feb 14 #Javascript
jquery中的$(document).ready()使用小结
Feb 14 #Javascript
You might like
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Python函数式编程实例详解
2020/01/17 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
python如何操作mysql
2020/08/17 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
为什么需要版本控制?
2013/08/08 面试题
大学学年自我鉴定
2013/10/28 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
助学贷款贫困证明
2014/09/23 职场文书
2014年超市工作总结
2014/11/19 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
教你用python实现12306余票查询
2021/06/30 Python