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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
jQuery的文档处理程序详解
May 10 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
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操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
Dom与浏览器兼容性说明
2010/10/25 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
Python代码需要缩进吗
2020/07/01 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
工程学毕业生自荐信
2014/06/14 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2014年体育工作总结
2014/11/24 职场文书
优秀党员先进材料
2014/12/18 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
导游词幽默开场白
2019/06/26 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫