Welcome folks today in this blog post we will be converting html form field values to json object using javascript and jquery. All the source code of the examples are given below.
Get Started
In order to get started you need to download and install form-to-json library
Now make a index.html file and copy paste the following code to include the libraries
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form to JSON with jQuery</title> <link rel="stylesheet" href="./css/form-to-json-v1.0.0.css" type="text/css"> </head> <body> <h1>Sample form:</h1> <p>* marked fields are required</p> <form id="myForm"> <div class="form-row"> <label for="firstname">First Name: *</label><br /> <input type="text" name="firstname" id="firstname" class="form-input-field" placeholder="First Name" required> </div> <div class="form-row"> <label for="lastname">Last Name: *</label><br /> <input type="text" name="lastname" id="lastname" class="form-input-field" placeholder="Last Name" required> </div> <div class="form-row"> <label for="email">Email: *</label><br /> <input type="email" name="email" id="email" class="form-input-field" placeholder="Email" required> </div> <div class="form-row"> <label for="phone">Phone: *</label><br /> <input type="phone" name="phone" id="phone" class="form-input-field" placeholder="Phone" required> </div> <div class="form-row"> <label form="subject">Subject: *</label><br /> <input type="text" name="subject" id="subject" class="form-input-field" placeholder="Subject" required> </div> <div class="form-row"> <label for="comments">Comments:</label><br /> <textarea name="comments" id="comments" class="form-input-field" rows="6"></textarea> </div> <div class="form-row"> <input type="submit" name="submit" value="Submit" class="form-submit-btn"> </div> </form> <div class="results"> <p class="result-json-output"></p> </div> <script src="./includes/js/jquery-3.5.1.min.js"></script> <script src="./includes/js/form-to-json-v1.0.0.js"></script> <script src="./includes/js/script.js"></script> </body> </html> |
Now make a form-to-json-v1.0.0.js file and copy paste the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
/** * Name: Form to JSON * Description: Create JSON object from a form submission using jQuery * Version: 1.0.0 * Author: Shrikumar Infotech * Author URI: dev@shrikumarinfotech.com * License: MIT * Lincense URI: https://opensource.org/licenses/MIT */ 'use strict'; jQuery(function( $ ){ // plugin function $.fn.formToJson = function( resultContainer ){ // console.log('this is from plugin'); // define form const form = this; // define display target from parameter // if(resultContainer != undefined){ // const displayResultTarget = resultContainer; // } // console.log(resultContainer); // define submitted data let submittedData = []; // define form data structure let formData = { id: Number, firstname: String, lastname: String, email: String, phone: Number, subject: String, comments: String, createdDate: String }; // define json data for output let jsonOutputData = Object.create(formData); // form submission function $(form).submit(function( event ){ event.preventDefault(); // console.log($(form).serialize()); // run sort data function sortData( $(form).serialize() ); // run json data function jsonData(); // display json data outputData(); // reset data resetData(); }); // sort data function function sortData( data ){ // sanity check if(data != undefined){ // regular expessions const regxSpace = /(?:%20)/gi; const regxEmail = /(?:%40)/gi; const regxLineBreak = /(?:%0D%0A)/gi; // save data by replacing with regx and split with '&' as parts let sortedData = data.replace(regxSpace, ' ').replace(regxEmail, '@').replace(regxLineBreak, '\n').split('&'); // iterate through sortedData and save as array into submittedData $(sortedData).each(function(index, element){ submittedData.push(element.split('=')); }); // console.log(submittedData); } }; // json data function function jsonData(){ // sanity check if(submittedData != undefined || submittedData != null){ // create JSON data $(submittedData).promise().done(function(){ // save json data jsonOutputData.id = Math.random(); jsonOutputData.firstname = submittedData[0][1]; jsonOutputData.lastname = submittedData[1][1]; jsonOutputData.email = submittedData[2][1]; jsonOutputData.phone = submittedData[3][1]; jsonOutputData.subject = submittedData[4][1]; jsonOutputData.comments = submittedData[5][1], jsonOutputData.createdDate = Date.now() }); } }; // output data function outputData(){ // stingify jsonOutputData for output let stringifyJsonData = JSON.stringify(jsonOutputData); // check if output target is provided if(resultContainer !== undefined || resultContainer !== null){ $(jsonOutputData).promise().done(function(){ $(resultContainer).html( stringifyJsonData ); // return stringifyJsonData; console.log(stringifyJsonData); // log the JSON data }); } else{ // else just return the JSON data console.log('resultContainer undefined'); return stringifyJsonData; } } // reset data function resetData(){ // reset all data submittedData = []; jsonOutputData = {}; } } }(jQuery)); |
Now make a form-to-json-v1.0.0.css file and copy paste the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
/** * Name: Form to JSON * Description: Create JSON object from a form submission using jQuery * Version: 1.0.0 * Author: Shrikumar Infotech * Author URI: dev@shrikumarinfotech.com * License: MIT * Lincense URI: https://opensource.org/licenses/MIT */ html { font-family: Arial, Helvetica, sans-serif; font-size: 67.5%; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-size: 1.6rem; color: #000000; background-color: #ffffff; } label { font-weight: bold; } .form-row { margin-top: 5px; margin-bottom: 5px; } .form-input-field { width: 350px; padding: 4px; font-size: 1.4rem; } .form-submit-btn { padding: 10px 25px; color: #ffffff; background-color: #3f3f3f; border-radius: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; } .form-submit-btn:hover { color: #ffffff; background-color: #000000; } .results .result-json-output { color: #0066ff; } /*# sourceMappingURL=form-to-json-v1.0.0.css.map */ |
And now make a script.js file and copy paste the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * Name: Form to JSON * Description: Create JSON object from a form submission using jQuery * Version: 1.0.0 * Author: Shrikumar Infotech * Author URI: dev@shrikumarinfotech.com * License: MIT * Lincense URI: https://opensource.org/licenses/MIT */ 'use strict'; jQuery.noConflict(); jQuery(document).ready(function( $ ){ // usage: 2 $('#myForm').formToJson('.result-json-output'); }); |
Screenshot
