表單中單選、多選、選擇框值的獲取及表單的序列化

博客搬家了，歡迎大家關注，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