原生js实现获取form表单数据代码实例
程序员文章站
2022-06-14 17:45:15
本文实例为大家分享了原生js实现获取form表单数据的具体代码,供大家参考,具体内容如下
//获取指定form中的所有的对象
f...
本文实例为大家分享了原生js实现获取form表单数据的具体代码,供大家参考,具体内容如下
//获取指定form中的所有的<input>对象 function getelements(formid) { var form = document.getelementbyid(formid); var elements = new array(); var tagelements = form.getelementsbytagname('input'); for (var j = 0; j < tagelements.length; j++){ elements.push(tagelements[j]); } var tagelements = form.getelementsbytagname('select'); for (var j = 0; j < tagelements.length; j++){ elements.push(tagelements[j]); } var tagelements = form.getelementsbytagname('textarea'); for (var j = 0; j < tagelements.length; j++){ elements.push(tagelements[j]); } return elements; } //组合url function serializeelement(element) { var method = element.tagname.tolowercase(); var parameter; if(method == 'select'){ parameter = [element.name, element.value]; } switch (element.type.tolowercase()) { case 'submit': case 'hidden': case 'password': case 'text': case 'date': case 'textarea': parameter = [element.name, element.value]; break; case 'checkbox': case 'radio': if (element.checked){ parameter = [element.name, element.value]; } break; } if (parameter) { var key = encodeuricomponent(parameter[0]); if (key.length == 0) return; if (parameter[1].constructor != array) parameter[1] = [parameter[1]]; var values = parameter[1]; var results = []; for (var i = 0; i < values.length; i++) { results.push(key + '=' + encodeuricomponent(values[i])); } return results.join('&'); } } //调用方法 function serializeform(formid) { var elements = getelements(formid); var querycomponents = new array(); for (var i = 0; i < elements.length; i++) { var querycomponent = serializeelement(elements[i]); if (querycomponent) { querycomponents.push(querycomponent); } } return querycomponents.join('&'); }
最后通过serializeform(formid);输入form的id名称即可实现,返回数据为
id=1&title=%e6%b4%bb%e5%8a%a8&time=2017-07-10&status=1&importance=0&desc=%e5%9c%a8%e4%ba%8c%e6%a5%bc%e5%8a%9e%e5%85%ac%e5%ae%a4%e5%bc%80%e4%bc%9a%ef%bc%8c%e4%b8%80%e7%82%b9%e9%92%9f
以上所述是小编给大家介绍的原生js实现获取form表单数据详解整合,希望对大家有所帮助
上一篇: JQueryDOM之样式操作
下一篇: 清朝疆域辽阔,为什么百姓却缺少田地?
推荐阅读
-
Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据实例
-
jQuery扩展方法实现Form表单与Json互相转换的实例代码
-
js原生代码实现轮播图的实例讲解
-
vue实现表单数据验证的实例代码
-
实现SQL Server 原生数据从XML生成JSON数据的实例代码
-
php/js获取客户端mac地址的实现代码_php实例
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
-
原生js实现each方法实例代码详解
-
原生js实现each方法实例代码详解