How can I get form data with JavaScript/jQuery?

前端 未结 28 2212
不知归路
不知归路 2020-11-22 12:39

Is there a simple, one-line way to get the data of a form as it would be if it was to be submitted in the classic HTML-only way?

For example:



        
28条回答
  •  轮回少年
    2020-11-22 13:27

    For those of you who would prefer an Object as opposed to a serialized string (like the one returned by $(form).serialize(), and a slight improvement on $(form).serializeArray()), feel free to use the code below:

    var Form = {
        _form: null,
        _validate: function(){
            if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
            if(!this._form.elements.length) return false;
        }, _loopFields: function(callback){
            var elements = this._form.elements;
            for(var i = 0; i < elements.length; i++){
                var element = form.elements[i];
                if(name !== ""){
                    callback(this._valueOfField(element));
                }
            }
        }, _valueOfField: function(element){
            var type = element.type;
            var name = element.name.trim();
            var nodeName = element.nodeName.toLowerCase();
            switch(nodeName){
                case "input":
                    if(type === "radio" || type === "checkbox"){
                        if(element.checked){
                            return element.value;
                        }
                    }
                    return element.value;
                    break;
                case "select":
                    if(type === "select-multiple"){
                        for(var i = 0; i < element.options.length; i++){
                            if(options[i].selected){
                                return element.value;
                            }
                        }
                    }
                    return element.value;
                    break;
                case "button":
                    switch(type){
                        case "reset": 
                        case "submit": 
                        case "button":
                            return element.value;
                            break;
                    }
                    break;
            } 
        }, serialize: function(form){
            var data = {};
            this._form = form;
    
            if(this._validate()){
                this._loopFields(function(value){
                    if(value !== null) data[name] = value;
                });
            }
            return data;
        }
    };
    

    To execute it, just use Form.serialize(form) and the function will return an Object similar to this:

    
    
    
    

    As a bonus, it means you don't have to install the entire bundle of jQuery just for one serialize function.

提交回复
热议问题