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 ...
随机推荐
- Spring Cloud实战之初级入门(六)— 服务网关zuul
目录 1.环境介绍 2.api网关服务 2.1 创建工程 2.3 api网关中使用token机制 2.4 测试 2.5 小结 3.一点点重要的事情 1.环境介绍 好了,不知不觉中我们已经来到了最后一篇 ...
- java设计模式之装饰者模式学习
装饰者模式 Decorator模式(别名Wrapper):动态将职责附加到对象上,若要扩展功能,装饰者提供了比继承更具弹性的代替方案. 装饰者与被装饰者拥有共同的超类,继承的目的是继承类型,而不是行为 ...
- jQuery对html元素取值与赋值
以下总结了常用的jQuery选择器对html元素取值与赋值 Textbox: var str = $('#txt').val(); $('#txt').val("Set Lbl Value ...
- Infor SyteLine如何快速锁定用户
使用Infor Syteline ERP系统,当需要做系统维护时,我们需要通知所有用户退出系统,在维护期间,严禁用户登录,这样的话,我们需要锁定用户.对于这个问题,很多管理员会打开SL的Users窗口 ...
- 利用NVM在系统中维护多个版本的nodejs
0. 背景 开发时可能同时进行多个项目,而这些项目所依赖的node版本又不是一样的.比如我现在的angular项目采用的node是8.9.3版本,而vue项目的vue-cli则依赖更高.由于ang ...
- nlinfit非线性回归拟合
% % 使用指定函数对下述两变量进行曲线拟合 % % y=a+k1*exp(m*t)+k2*exp(-m*t); % % 离散点: t=[0,4,8,40], % % y=[20.09,64.5 ...
- bootstrap colorscheme以及theme自动生成
http://paintstrap.com/ 是一个根据adobe kuler color scheme自动生成theme 的工具,比较直观好用,对于调整前端theme有一定参考意义
- mongodb 3.4复制集详解
1关闭数据库,打开三个mongodb数据库数据库实例 rs.printReplicationInfo() 2:原理 主库能够进行读写操作,一个复制集群只能有一个活跃的主库 一般情况下复制可以分为好几种 ...
- 【SQL重温】面试之数据库基础练习
简介 最近在练习SQL基础,首先感叹一下,在机器上写和在纸上写还是有区别的. 本文的练习题目请点击此链接进行查看:http://www.cnblogs.com/edisonchou/p/3878135 ...
- wcf 访问控制
public class PasswordDigestChannelFactory<TPortTypeClient, TPlugin> where TPortTypeClient : Cl ...