get form data in key/value pair

get the form elements data in key value pair

by R J

HTML

<form class="form">
    <div>
        Name:
        <br>
            <input type="text" name="name", value="User Name">
            </div>
            <br>
                <div>
                    Gender:
                    <br>
                        <input type="radio" name="radio" value="radio1" checked="checked">Radio1                
                            <br>
                                <input type="radio" name="radio" value="radio2" checked="checked">Radio2                
                                </div>
                                <br>
                                    <div>
                                        Contact: <br>
                                        <input type="checkbox" name="checkbox" value="checkbox1" checked="checked">Checkbox1<br>                
                                            <input type="checkbox" name="checkbox" value="checkbox2" checked="checked">Checkbox2
                                            </div>
                                            <br>
                                                <div>
                                                    Select Option<br>
                                                    <select name="select">
                                                        <option value="opt1">opt1</option>
                                                        <option value="opt2">opt2</option>
                                                        <option value="opt3">opt3</option>
                                                    </select>
                                                    </div>
                                                    <br>
                                                        <div>
                                                            Multiple Select OptionB<br>
                                                            <select name="multipleSelect" multiple>
                                                     ...

JavaScript

$(function(){
    $(".getFormVal").on("click",function(e){
        e.preventDefault();
        var formObj={};
        var formEle = $(".form").find("input:not([type=submit],[type=button]),select,textarea");
        
        $(formEle).each(function(){
            if($(this).prop("tagName").toLowerCase() == "input"){                           
                if( ($(this).attr("type").toLowerCase() == "text") || 
                   ($(this).attr("type").toLowerCase() == "radio" && $(this).is(":checked")) || 
                   ($(this).attr("type").toLowerCase() == "file") ){
                    formObj[$(this).attr("name")] = $(this).val();                               
                }else if( $(this).attr("type").toLowerCase() == "checkbox" && $(this).is(":checked") ){
                    if(formObj[$(this).attr("name")] === undefined){
                        formObj[$(this).attr("name")] = [];
                    }
                    formObj[$(this).attr("name")].push($(this).val());
                }
            }else if( $(this).prop("tagName").toLowerCase() == "textarea" ){
                formObj[$(this).attr("name")] = $(this).val();
            }else if( $(this).prop("tagName").toLowerCase() == "select" ){
                if($(this).attr("multiple")){
                    if(formObj[$(this).attr("name")] === undefined){
                        var selectEleName = $(this).attr("name");
                        formObj[selectEleName] = [];
                    }                               
                    $('option:selected',this).each(function(i, selected){
                        formObj[selectEleName].push($(this).attr("value")); 
                    });
                    
                }else{
                    formObj[$(this).attr("name")] = $(this).val();
                }
            }
            
        });
        
        alert(JSON.stringify(formObj));
    }); 
});