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学习笔记8 用JSON做原型
Jan 11 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
js数组去重的N种方法(小结)
Jun 07 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
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
4.与数据库的连接
2006/10/09 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
javascript自执行函数
2017/02/10 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
企业统计员岗位职责
2013/12/13 职场文书
西式婚礼主持词
2014/03/13 职场文书
公司合并协议书范本
2014/09/30 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
内勤岗位职责范本
2015/04/13 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python