表单元素值获取方式js及java方式的简单实例


Posted in Javascript onOctober 15, 2016

大家都知道我们在提交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

以上就是小编为大家带来的表单元素值获取方式js及java方式的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
JQuery学习总结【二】
Dec 01 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
JS添加或修改控件的样式(Class)实现方法
Oct 15 #Javascript
原生JS实现的放大镜效果实例代码
Oct 15 #Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 #Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 #Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 #Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 #Javascript
jQuery ajaxForm()的应用
Oct 14 #Javascript
You might like
PHP邮箱验证示例教程
2016/06/01 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
取得父标签
2006/11/14 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
javascript类型转换示例
2014/04/29 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
Python实现控制台输入密码的方法
2015/05/29 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
如何在python中判断变量的类型
2020/07/29 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
数组越界问题
2015/10/21 面试题
学生励志演讲稿
2014/01/06 职场文书
护士自我评价
2014/02/01 职场文书
环境保护建议书
2014/08/26 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android