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技术-屏蔽类
Aug 15 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
PHP 的几个配置文件函数
2006/12/21 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
基于Python解密仿射密码
2019/10/21 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
本科应届生求职信
2014/08/05 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
入党函调证明材料
2014/12/24 职场文书
入党群众意见范文
2015/06/02 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书