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 刷新框架页的代码
Apr 13 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
vue 虚拟dom的patch源码分析
Mar 01 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
vue动态注册组件实例代码详解
May 30 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 define()函数以及defined()函数的用法详解
2013/06/05 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
讲解Python中fileno()方法的使用
2015/05/24 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python 实现按对象传值
2019/12/26 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
党校培训自我鉴定
2014/02/01 职场文书
《阳光》教学反思
2014/02/23 职场文书
三八节标语
2014/06/27 职场文书
检讨书格式范文
2015/05/07 职场文书
军事博物馆观后感
2015/06/05 职场文书
数学复习课教学反思
2016/02/18 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Python使用openpyxl批量处理数据
2021/06/23 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript