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 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 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 checkbox 取值详细说明
2010/08/19 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js获取域名的方法
2015/01/27 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Python中的rfind()方法使用详解
2015/05/19 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
浅谈Python的list中的选取范围
2018/11/12 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
python音频处理的示例详解
2020/12/23 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
个人近期表现材料
2014/02/11 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
借款担保书范文
2014/05/13 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
趣味运动会赞词
2015/07/22 职场文书