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 Event学习第三章 早期的事件处理程序
Feb 07 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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产生动态的影像图
2006/10/09 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python显示天气预报
2014/03/02 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
中科创达面试题
2016/12/28 面试题
英语专业应届生求职信范文
2013/11/15 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
口头翻译求职人自荐信
2013/12/07 职场文书
医院标语大全
2014/06/23 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
如何在C++中调用Python
2021/05/21 Python