HTMLFormElement获取表单里面所有的值然后以json形式返回
function HTMLFormElement(){
this.init();
return this.json;
}
HTMLFormElement.prototype.init = function(){
this.json = {};
this.inputs = document.querySelectorAll("input");
this.texts = document.querySelectorAll("textarea");
this.sels = document.querySelectorAll("select");
this.types = ['checkbox', 'color', 'date', 'datetime', 'datetime-local', 'month', 'week', 'time', 'email', 'file', 'hidden', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'url'];
this.SerializedJson();
};
HTMLFormElement.prototype.SerializedJson = function() {
if (this.inputs.length > 0 || this.texts.length > 0) {
this.getInputsValue();
this.getTextValue();
this.getSelsValue();
}
};
HTMLFormElement.prototype.getInputsValue = function(){
var input;
for (var i = 0; i < this.inputs.length; i++) {
input = this.inputs[i];
var name = input.getAttribute("name");
var type = input.getAttribute("type");
if (type && name && this.types.indexOf(type.toLowerCase()) > -1) {
if (type != 'checkbox' && type != 'radio') {
this.json[name] = input.value;
} else if (type == 'radio') {
if (!this.json[name]) {
this.json[name] = '';
}
if (input.checked) {
this.json[name] = input.value;
}
} else if (type == 'checkbox') {
if (!this.json[name]) {
this.json[name] = '';
}
if (input.checked) {
if (this.json[name]) {
this.json[name] += "," + input.value
} else {
this.json[name] = input.value;
}
}
}
}
}
}
HTMLFormElement.prototype.getTextValue = function(){
for (var i = 0; i < this.texts.length; i++) {
input = this.texts[i];
var name = input.getAttribute("name");
if (name) {
this.json[name] = input.value;
}
};
};
HTMLFormElement.prototype.getSelsValue = function(){
for (var i = 0; i < this.sels.length; i++) {
input = this.sels[i];
var name = input.getAttribute("name");
if (name) {
this.json[name] = input.value;
}
}
return this.json;
}
使用方法:
new HTMLFormElement());
HTMLFormElement获取表单里面所有的值然后以json形式返回的更多相关文章
- request.getParameterMap() 获取表单提交的键值对 并且 也能获取动态表单的key
Map<String,String[]> map = request.getParameterMap();Set<String> keys = map.keySet(); 获取 ...
- 异步发送表单数据到JavaBean,并响应JSON文本返回
1) 提交表单后,将JavaBean信息以JSON文本形式返回到浏览器 <form> 编号:<input type="text" name="id&q ...
- jQuery获取表单各元素的值
radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio' ...
- 21SpringMvc_异步发送表单数据到Bean,并响应JSON文本返回(这篇可能是最重要的一篇了)
这篇文章实现三个功能:1.在jsp页面点击一个按钮,然后跳转到Action,在Action中把Emp(int id ,String salary,Data data)这个实体变成JSON格式返回到页面 ...
- jQuery—获取表单标签的数据值
获取设置input标签的值 <input class="form-control" type="text" id="username" ...
- asp.net 获取表单中控件的值
原文:https://blog.csdn.net/happymagic/article/details/8480235 C# 后台获取前台 input 文本框值.(都是以控件的Name来获取) s ...
- 用jQuery获取表单的值
在日常开发过程中,有许多用到表单的地方.比如登录,注册,比如支付,填写订单,比如后台管理等等. 使用jQuery来获取表单的值是比较常见的做法. 常见表单 单行文字域:<input type=' ...
- jQuery name属性与checked属性结合获取表单元素值
var paytype = $("input[name='paytype']:checked").val(); alert(paytype); input元素下名称为paytype ...
- javascript获取表单的各项值
何谓表单? 表单是html页面中负责数据采集功能的部件,它往往由三个部分组成: 表单标签:<form></form> 用于声明表单的范围,位于表单标签中的元素将被提交.属性有m ...
随机推荐
- DIV固定宽度和动态拉伸混合水平排列
1.效果图 2.源代码 html <h2>1.头部固定,尾部拉伸</h2> <div class="container" id="div1& ...
- https、公钥、私钥白话解说
原文 摘要:本文尝试一步步还原HTTPS的设计过程,以理解为什么HTTPS最终会是这副模样.但是这并不代表HTTPS的真实设计过程.在阅读本文时,你可以尝试放下已有的对HTTPS的理解,这样更利于“还 ...
- python logging的应用
#-*-coding:utf-8-*-#util import logging import logging from logging.handlers import RotatingFileHand ...
- Java 文件上传与下载、email
1. 文件上传与下载 1.1 文件上传 文件上传,要点: 前台: 1. 提交方式:post 2. 表单中有文件上传的表单项: <input type="file" /> ...
- EMSAscript
1.javaScript 中const.var.let区别 const 定义的变量不可修改 而且必须初始化 =>解决闭包变量污染问题 var 定义的变量可以修改 如果不初始化则默认值为undef ...
- Codeforces Round #416 (Div. 2) A+B
A. Vladik and Courtesy 2 seconds 256 megabytes At regular competition Vladik and Valera won a and ...
- 【JAVA语法】01Java-变量与数据类型
数据类型初阶 基本数据类型的包装类 整数类型&浮点类型&字符类型 大小类型转换 通过Scanner从控制台获取数据 变量相关基础算法 Java的错误类型 字符串String 补充-Pa ...
- SVNKit学习——基于Repository的操作之print repository tree、file content、repository history(四)
此篇文章同样是参考SVNKit在wiki的官方文档做的demo,每个类都可以单独运行.具体的细节都写到注释里了~ 开发背景: SVNKit版本:1.7.14 附上官网下载链接:https://www. ...
- Elasticsearch查询类型
Elasticsearch支持两种类型的查询:基本查询和复合查询. 基本查询,如词条查询用于查询实际数据. 复合查询,如布尔查询,可以合并多个查询, 然而,这不是全部.除了这两种类型的查询,你还可以用 ...
- 罗大佑 光阴的故事 ZT 欧美经典歌曲100首(1-50)
老俞 my idol ———————————————————————————————— 罗大佑 光阴的故事 歌曲光阴的故事为2008年入库,是罗大佑在2000-1-1发行的专辑<情歌精选> ...