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 JavaScript获取Url参数,src属性参数
Mar 09 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
JavaScript数值类型知识汇总
Nov 17 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网上商城购物车设计代码分享
2012/02/15 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
文明餐桌活动方案
2014/02/11 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
个人培训总结
2015/03/05 职场文书
千手观音观后感
2015/06/03 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
自荐信大全
2019/03/21 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python