通过javascript获取所有表单值 [英] Getting all form values by javascript

问题描述

我有表格：

 < form onchange =allvaluestostring（）> 
< select name =status> 
< option value =*>全部< / option> 
< option value =1>活动< / option> 
< option value =0>无效< / option> 
< / select> 
< select name =size> 
< option value =*>全部< / option> 
< option value =small>小< / option> 
< option value =big> Big< / option> 
< / select> 
< / form> 
  

在form中，任何输入的onchange动作都需要获取javascript字符串，例如 status = 1& size = big 用于httprequest。

存在javascript中的某些内容时，输入将被改变？

我使用< select name =statusonchange =showExporteditems（this.name，this.value） > 但这只会使用一个输入值来仅使用 status = 1 ，但我需要每次都输入所有输入的所有值像 status = 1& size = big& ... etc ....这样的字符串。。



谢谢！

编辑：不使用jquery。 工作在香草JS中一个href =http://jsfiddle.net/c8j6x/ =nofollow noreferrer>小提琴 ......但是你需要的是添加一个序列化实用功能。这与jQuery中的 $（'form'）。serialize（）完全一样。 >

  var data; 
 
函数serialize（form）{
 if（！form || form.nodeName！==FORM）{
 return; 
} 
 var i，j，q = []; 
 for（form.elements.length  -  1; i> = 0; i = i  -  1）{
 if（form.elements [i] .name ===）{ 
继续; 
} 
 switch（form.elements [i] .nodeName）{
 case'INPUT'：
 switch（form.elements [i] .type）{
案例'文本'：
案例'隐藏'：
案例'密码'：
案例'按钮'：
案例'重置'：
案例'提交'： 
 q.push（form.elements [i] .name +=+ encodeURIComponent（form.elements [i] .value））; 
休息; 
 case'checkbox'：
 case'radio'：
 if（form.elements [i] .checked）{
 q.push（form.elements [i] .name +=+ encodeURIComponent（form.elements [i] .value））; 
} 
 break; 
} 
 break; 
 case'file'：
 break; 
 case'TEXTAREA'：
 q.push（form.elements [i] .name +=+ encodeURIComponent（form.elements [i] .value））; 
休息; 
 case'SELECT'：
 switch（form.elements [i] .type）{
 case'select-one'：
 q.push（form.elements [i] .name +=+ encodeURIComponent（form.elements [i] .value））; 
休息; 
 case'select-multiple'：
 for（j = form.elements [i] .options.length  -  1; j> = 0; j = j  -  1）{
 if （form.elements [i] .options [j] .selected）{
 q.push（form.elements [i] .name +=+ encodeURIComponent（form.elements [i] .options [j] 。值））; 
} 
} 
 break; 
} 
 break; 
 case'BUTTON'：
 switch（form.elements [i] .type）{
 case'reset'：
 case'submit'：
 case'button '：
 q.push（form.elements [i] .name +=+ encodeURIComponent（form.elements [i] .value））; 
休息; 
} 
 break; 
} 
} 
 data = q.join（&）; 
} 
  

并更改您的表格 onchange to

 < form onchange =serialize（this）> 
  

刚刚测试过，获得size = small& status = 0 code>在控制台中。

I have form:

<form onchange="allvaluestostring()">       
    <select name="status">
         <option value="*">All</option>
         <option value="1">Active</option>
         <option value="0">Inactive</option>
    </select>
    <select name="size">
          <option value="*">All</option>
          <option value="small">Small</option>
          <option value="big">Big</option>
    </select>
</form>

And onchange action of any input in form i need to get javascript string for example "status=1&size=big" for using in httprequest.

Exist something in javascript what take all form values when one of form inputs will be changed?

I used <select name="status" onchange="showExporteditems(this.name,this.value)"> but this will take only one input value for using only "status=1", but i need on each onchage all values from all inputs for string like "status=1&size=big&...etc....".

Thanks!

EDIT: without using jquery.

解决方案

Working fiddle in vanilla JS... but what you need is to add a serialize utility function. This works exactly like $('form').serialize() in jQuery.

Javascript:

var data;

function serialize(form) {
    if (!form || form.nodeName !== "FORM") {
        return;
    }
    var i, j, q = [];
    for (i = form.elements.length - 1; i >= 0; i = i - 1) {
        if (form.elements[i].name === "") {
            continue;
        }
        switch (form.elements[i].nodeName) {
        case 'INPUT':
            switch (form.elements[i].type) {
            case 'text':
            case 'hidden':
            case 'password':
            case 'button':
            case 'reset':
            case 'submit':
                q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                break;
            case 'checkbox':
            case 'radio':
                if (form.elements[i].checked) {
                    q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                }
                break;
            }
            break;
        case 'file':
            break;
        case 'TEXTAREA':
            q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
            break;
        case 'SELECT':
            switch (form.elements[i].type) {
            case 'select-one':
                q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                break;
            case 'select-multiple':
                for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
                    if (form.elements[i].options[j].selected) {
                        q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value));
                    }
                }
                break;
            }
            break;
        case 'BUTTON':
            switch (form.elements[i].type) {
            case 'reset':
            case 'submit':
            case 'button':
                q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                break;
            }
            break;
        }
    }
    data = q.join("&");
}

and change your form onchange to

<form onchange="serialize(this)">

Just tested, getting "size=small&status=0" in the console.

这篇关于通过javascript获取所有表单值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！