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中遭遇级联表达式陷阱
Mar 08 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
原生js简单实现放大镜特效
May 16 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
如何使用Strace调试工具
2013/06/03 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
基于python实现微信模板消息
2015/12/21 Python
Python异常的检测和处理方法
2018/10/26 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python Http请求json解析库用法解析
2020/11/28 Python
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
股指期货心得体会
2014/09/13 职场文书
党员个人剖析材料
2014/09/30 职场文书
毕业典礼致辞
2015/07/29 职场文书
队列队形口号
2015/12/25 职场文书
四年级语文教学反思
2016/03/03 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript