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下过滤数组重复值的代码
Sep 10 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
js实现动态显示时间效果
Mar 06 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
从vue源码看props的用法
Jan 09 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
php中的依赖注入实例详解
2019/08/14 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
图像替换新技术 状态域方法
2010/01/28 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
javascript中的隐式调用
2018/02/10 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
JS实现多选框的操作
2020/06/24 Javascript
Python中的迭代器漫谈
2015/02/03 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python批量更改文件名的实现方法
2017/10/29 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
html5唤起app的方法
2017/11/30 HTML / CSS
公司庆典活动邀请函
2014/01/09 职场文书
我的中国梦口号
2014/06/16 职场文书
倡议书的写法
2014/08/30 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python