原生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
已經將資料編碼
相關文章
- JQuery獲取form表單中所有值jQueryORM
- 過濾器中獲取form表單或url請求資料過濾器ORM
- JS原生實現表單序列化JS
- 原生JS實現表單序列化serialize()JS
- 仿 ElmentUI 實現一個 Form 表單UIORM
- vxe-form table 實現摺疊表單ORM
- Vue+Element+JS動態生成form表單實現新增和刪除操作VueJSORM
- js實現獲取URL引數JS
- Vue資料驅動表單渲染,輕鬆搞定form表單VueORM
- vxe-form table 表單實現簡歷模板ORM
- vxe-form table 表單使用資料校驗ORM
- 使用LocalStorage實現Form表單內容本地儲存ORM
- ES系列(五):獲取單條資料get處理過程實現
- 表單form方式ORM
- 清空form表單ORM
- 基於Gin框架的web後端開發(四): 獲取FORM表單引數框架Web後端ORM
- jq 將form表單中的資料轉為jsonORMJSON
- 分享一個H5原生form表單的checkbox特效H5ORM特效
- Struts2框架自學之路——Action獲取表單資料的方式以及表單資料的封裝框架封裝
- 獲得JD商品評論 API 如何實現實時資料獲取API
- 通過原生js實現資料的雙向繫結JS
- js_原生js獲取當前的使用者ipJS
- 解決PHP Post獲取不到非表單資料的問題PHP
- form表單提交方式ORM
- tpextbuilder- Form表單UIORM
- Auto.js Pro 資料獲取 與 異常捕獲JS
- js實現資料結構--單連結串列JS資料結構
- Layui環境下form表單提交;jquery.form.js;lay-verify,lay-filter;UIORMjQueryJSFilter
- 原生 JS實現一個簡單分頁外掛JS
- 原生js實現replace方法JS
- jQuery獲取表單值及幾個表單事件jQuery事件
- java學習路程(javaEE)之獲取表單資料、獲取引數、request域、會話技術(Cookie)Java會話Cookie
- django通過form和ajax提交表單資料和圖片DjangoORM
- 如何使用js獲取USB掃碼槍資料JS
- 原生JS和jQuery分別使用jsonp來獲取“當前天氣資訊”jQueryJSON
- 用最簡單的方法實現原生 JS 放大鏡特效JS特效
- form表單的簡單介紹ORM
- Java實現動態的匯出Excel表功能--用form表單提交JavaExcelORM
- 用原生 JS 實現 innerHTML 功能JSHTML