Menu Close

How to get form data using JavaScript / jQuery?

0
(0)

The serializeArray() method creates an array of objects (name and value) by serializing form values. You can select one or more form elements (like input and/or text area), or the form element itself.

Example Code:

Here I have added two variations for output results (With and Without labels). 

<!DOCTYPE html>

<html>

    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script>

            $(document).ready(function(){

                $("#serialize").click(function(){

                    var x = $("form").serializeArray();

                    $.each(x, function(i, field){

                        $("#results1").append(field.name + ":" + field.value + "<br><br>");

                        $("#results2").append(field.value);

                    });

                });

            });

        </script>

        <style>

            .body-section{background: #ddd;padding: 20px 20px;}

            .form-section{width: 80%;margin: 0 auto;padding: 20px;background: #fff;}

        </style>

    </head>

    <body class="body-section">

        <div class="form-section">

            <form action="">

                <input type="text" name="FirstName" value="Web Developer" placeholder="First Name"><br><br>

                <input type="text" name="MiddleName" value="WordPress Developer" placeholder="Middle Name"><br><br>

                <input type="text" name="LastName" value="App Developer" placeholder="Last Name"><br><br>

            <button id="serialize">Submit Form Values</button><br><br>

            </form>

            <div id="results1"></div><br><br>

            <div id="results2"></div>

        </div>

    </body>

</html> 

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Share

Posted in HTML, JavaScript, jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

You can also read...