Skip to main content

How to get form data using JavaScript / jQuery?

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.


Syntax:

$(selector).serializeArray()


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{background: #ddd;padding: 20px 20px;}

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

        </style>

    </head>

    <body>

        <div class="form-section">

            <form action="">

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

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

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

            </form>

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

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

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

        </div>

    </body>

</html>


Output Before click submit button:

 

Output After click submit button:

 



Labels:

Comments

Post a Comment

Popular posts from this blog

How to align Placeholder Text in HTML ?

Input Placeholder attribute specifies a short hint to describe the expected value of an input field / textarea. The short hint is displayed in the field before the user enters a value. In most of the browsers, placeholder texts are usually aligned on the left. The selector uses text-align property to set the text alignment in the placeholder. This selector can change browser to browser. For example: For Chrome, Mozilla, and Opera Browsers: use ::placeholder For Internet Explorer: use :-ms-input-placeholder   Example 1: This example describes only placeholder alignment, it does not align placeholder value. <!DOCTYPE html>  <html>      <head>          <title>Change Placeholder alignment | Codewithanbu</title>          <style>              body {text-align:center;pad...
Post a Comment
Read more

Text Align Property in CSS

  The text-align property in CSS is used to make the horizontal alignment of text in an element. Property Value: The text-align property value are listed below: S.No Property Value Syntex Description 1 left text-align:left; Used to align the text-alignment into left. 2 center text-align:center; Used to align the text-alignment into center. 3 right text-align:right; Used to align the text-alignment into right. 4 justify text-align:justify; Used to stretch the content of an element to display the same width of each line 5 initial text-align:initial; Used to set its default value. 6 inherit text-align:inherit; Used to be inherited from its parent.
Post a Comment
Read more