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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
js倒计时抢购实例
Dec 20 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 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+SqlServer实现分页显示
2006/10/09 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
js转换对象为xml
2017/02/17 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python批量转换文件编码格式
2015/05/17 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python单例模式的多种实现方法
2019/07/26 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
具结保证书范本
2015/05/11 职场文书
理想国读书笔记
2015/06/25 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python