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实现检测指定目录是否存在的方法
Jan 12 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
javascript屏蔽右键代码
May 15 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php实现图片缩略图的方法
2016/03/29 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python字符串对其居中显示的方法
2015/07/11 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
tensorflow如何批量读取图片
2019/08/29 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python打包生成so文件的实现
2020/10/30 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
Why do we need Unit test
2013/01/03 面试题
自荐信不宜过于夸大
2013/11/06 职场文书
八年级音乐教学反思
2014/01/09 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
伦敦奥运会口号
2014/06/13 职场文书