How to Serialize HTML Form Data to JSON in Vanilla Javascript Without Using jQuery Full Project For Beginners

How to Serialize HTML Form Data to JSON in Vanilla Javascript Without Using jQuery Full Project For Beginners

 

Welcome folks today in this blog post we will be serializing html form data to json in vanilla javascript without using jquery. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
  <head>
    <title>JSON to Table in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <style>
      body {
  margin: 2em auto;
  max-width: 600px;
}

form div {
    margin-bottom: 0.5em;
}
form div label, form div input {
    display: block;
    margin-bottom: 0.3em;
}

  </style>
  <body>
    <form id="test" action="#" method="post">
        <div class="form-group">
            <label for="name">Name</label>
            <input class="form-control" type="text" name="name" id="name" />
        </div>
        <div class="form-group">
            <label for="check">Check if you like JavaScript</label>
            <input type="checkbox" name="check" value="yes" />
        </div>
        <div class="form-group">
            <label for="select">Select your favorite JavaScript framework</label>
            <select name="select" class="form-control">
                <option value="none" selected="selected">None</option>
                <option value="jquery">jQuery</option>
                <option value="angularjs">Angular</option>
                <option value="mine">Mine, of course!</option>
            </select>
    
        </div>
        <div class="form-group">
            <label for="message">Leave a message</label>
            <textarea class="form-control" name="message" rows="15" cols="30"></textarea>
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input class="form-control" type="text" name="email" id="email" />
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input class="form-control" type="password" name="password" id="password" />
        </div>
        <p>
            <input type="submit" value="Send" class="btn btn-primary btn-block" />
        </p>
    </form>   
    <pre id="output"></pre>    
</body>
</html>

 

See also  How to Convert HTML Form Field Values to JSON Object Using Javascript and jQuery Full Tutorial For Beginners

 

Now make a script.js file and copy paste the following code

 

script.js

 

(function() {
    function toJSONString( form ) {
        var obj = {};
        var elements = form.querySelectorAll( "input, select, textarea" );
        for( var i = 0; i < elements.length; ++i ) {
            var element = elements[i];
            var name = element.name;
            var value = element.value;

            if( name ) {
                obj[ name ] = value;
            }
        }

        return JSON.stringify( obj );
    }

    document.addEventListener( "DOMContentLoaded", function() {
        var form = document.getElementById( "test" );
        var output = document.getElementById( "output" );
        form.addEventListener( "submit", function( e ) {
            e.preventDefault();
            var json = toJSONString( this );
            output.innerHTML = json;

        }, false);

    });

})();

 

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

Leave a Reply