How to get form data using JavaScript/jQuery?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   
<head>
    <script src=
    </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>

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.