表单中单选、多选、选择框值的获取及表单的序列化

博客搬家了，欢迎大家关注，https://bobjin.com

总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化，写成了一个对象。如下：

　　var formUtil = {
        // 获取单选按钮的值，如有没有选的话返回null
        // elements为radio类的集合的引用
        getRadioValue:function(elements) {
            var value = null; // null表示没有选中项
            // 非IE浏览器
            if(elements.value != undefined && elements.value != '') {
                value = elements.value;
            } else {
                // IE浏览器
                for(var i = 0, len = elements.length; i < len; i++ ) {
                    if(elements[i].checked) {
                        value = elements[i].value;
                        break;
                    }
                }
            }
            return value;
        },
        
        // 获取多选按钮的值，如有没有选的话返回null
        // elements为checkbox类型的input集合的引用
        getCheckboxValue:function(elements) {
            var arr = new Array();
            for(var i = 0, len = elements.length; i < len; i++ ) {
                if(elements[i].checked) {
                    arr.push(elements[i].value);
                }
            }
            if(arr.length > 0) {
                return arr.join(',');
            } else {
                return null; // null表示没有选中项
            }    
        },
        
        // 获取下拉框的值
        // element为select元素的引用
        getSelectValue:function(element) {
            if(element.selectedIndex == -1) {
                return null; // 没有选中的项时返回null
            };
            if(element.multiple) {
                // 多项选择
                var arr = new Array(), options = element.options;
                for(var i = 0, len = options.length; i < len; i++) {
                    if(options[i].selected) {
                        arr.push(options[i].value);
                    }
                }
                return arr.join(",");
            }else{
                // 单项选择
                return element.options[element.selectedIndex].value;
            }
        },
        
        // 序列化
        // form为form元素的引用
        serialize:function(form) {
            var arr = new Array(),
            elements = form.elements,
            checkboxName = null;
            for(var i = 0, len = elements.length; i < len; i++ ) {
                field = elements[i];
                // 不发送禁用的表单字段
                if(field.disabled) {
                    continue;
                }
                switch (field.type) {
                    // 选择框的处理
                    case "select-one":
                    case "select-multiple":
                        arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(this.getSelectValue(field)));
                        break;
                    
                    // 不发送下列类型的表单字段    
                    case undefined :
                    case "button" :
                    case "submit" :
                    case "reset" :
                    case "file" :
                        break;
                    
                    // 单选、多选和其他类型的表单处理     
                    case "checkbox" :
                        if(checkboxName == null) {
                            checkboxName = field.name;
                            arr.push(encodeURIComponent(checkboxName) + "=" + encodeURIComponent(this.getCheckboxValue(form.elements[checkboxName])));
                        }
                        break;
                    case "radio" :
                        if(!field.checked) {
                            break;
                        }
                    default:
                        if(field.name.length > 0) {
                            arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                        } 
                }
            }
            return arr.join("&");
        } 
    };

一个简单的demo：

 1　　 <form action="test_php.php" id="form1" name="form1" method="post" enctype="multipart/form-data">
        姓名：<input name="name" type="text" tabindex="1" /> <br>
        性别：<input name="sex" type="radio" value="男"/> 男 
             <input name="sex" type="radio" value="女" /> 女 <br>
        爱好：
        <input name="hobby" type="checkbox" value="篮球" /> 篮球
        <input name="hobby" type="checkbox" value="足球" /> 足球
        <input name="hobby" type="checkbox" value="乒乓球" /> 乒乓球
        <input name="hobby" type="checkbox" value="羽毛球" /> 羽毛球
        <br />
        年级：
        <select name="class" multiple>
            <option value="一年级">一年级</option>
            <option value="二年级">二年级</option>
            <option value="三年级">三年级</option>
        </select>
        <br />
         其他：
         <br />
         <textarea name="other" rows="5" cols="30" tabindex="2"></textarea>
         <br />
         <input type="reset" value="重置" />
         <input type="submit" value="提交" />
    </form>
    <div id="output"></div>

 1　　 var form = document.getElementById("form1"),
    output = document.getElementById("output");
    
    // 自定义的提交事件
    EventUtil.addEventListener(form,"submit", function(event) {
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
        var html = "";
        html += form.elements['name'].value + "<br>";
        html += formUtil.getRadioValue(form.elements['sex']) + "<br>";
        html += formUtil.getCheckboxValue(form.elements['hobby']) + "<br>";
        html += formUtil.getSelectValue(form.elements['class']) + "<br>";
        html += form.elements['other'].value + "<br>";
        html += decodeURIComponent(formUtil.serialize(form)) + "<br>";
        output.innerHTML = html;
    });

PS:代码出现的EventUtil在”跨浏览器的事件侦听器和事件对象“这篇文章有介绍。链接：http://www.cnblogs.com/yuanke/p/5045821.html

博客搬家了，欢迎大家关注，https://bobjin.com