How to get form data using JavaScript/jQuery?

Last Updated : 03 Aug, 2021

The serializeArray() method creates an array of objects (name and value) by serializing form values. This method can be used to get the form data. Syntax:

$(selector).serializeArray()

Parameter: It does not accept any parameter. Return Value: It returns all the value that is inside the inputs fields. Example:

html

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var x = $("form").serializeArray();
                $.each(x, function(i, field) {
                    $("#output").append(field.name + ":"
                            + field.value + " ");
                });
            });
        });
    </script>
    
    <style>
        #GFG {
            width: 300px;
            padding: 50px;
            height: 150px;
            border: 2px solid green;
        }
    </style>
</head>
 
<body>
    <div id="GFG">
        <form action="#">
            Name: <input type="text" 
                style="margin: 10px;" name="Name">
            <br>
        </form>
 
        <button>Submit</button>
    </div>
 
    <div id="output"></div>
</body>
 
</html>

Output:

Before clicking the button:
After clicking the button:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.