This code allows you to save HTML form data to a JSON file using JavaScript. It works by extracting input values and converting them into a JSON object. It helps store form submissions as structured data.
You can use this code on any website with HTML forms to collect user data. It helps you easily save form submissions as JSON files, enabling structured storage and analysis. This simplifies data management and enhances user engagement on your website.
How to Create Save HTML Form Data To JSON File Using JavaScript
1. Start by creating an HTML form where users can input their data. Ensure each input element has a unique id attribute for easy identification.
<section class="content">
<h1 class="content__heading">Send Me a Message</h1>
<p class="content__lede">Use this handy contact form to get in touch with me.</p>
<form class="content__form contact-form">
<div class="testing">
<p>Does this do anything?</p>
</div>
<div class="contact-form__input-group">
<input class="contact-form__input contact-form__input--radio" id="salutation-mr" name="salutation" type="radio" value="Mr."/>
<label class="contact-form__label contact-form__label--radio" for="salutation-mr">Mr.</label>
<input class="contact-form__input contact-form__input--radio" id="salutation-mrs" name="salutation" type="radio" value="Mrs."/>
<label class="contact-form__label contact-form__label--radio" for="salutation-mrs">Mrs.</label>
<input class="contact-form__input contact-form__input--radio" id="salutation-ms" name="salutation" type="radio" value="Ms."/>
<label class="contact-form__label contact-form__label--radio" for="salutation-ms">Ms.</label>
</div>
<div class="contact-form__input-group">
<label class="contact-form__label" for="name">Full Name</label>
<input class="contact-form__input contact-form__input--text" id="name" name="name" type="text"/>
</div>
<div class="contact-form__input-group">
<label class="contact-form__label" for="email">Email Address</label>
<input class="contact-form__input contact-form__input--email" id="email" name="email" type="email"/>
</div>
<div class="contact-form__input-group">
<label class="contact-form__label" for="subject">How can I help you?</label>
<select class="contact-form__input contact-form__input--select" id="subject" name="subject">
<option>I have a problem.</option>
<option>I have a general question.</option>
</select>
</div>
<div class="contact-form__input-group">
<label class="contact-form__label" for="message">Enter a Message</label>
<textarea class="contact-form__input contact-form__input--textarea" id="message" name="message" rows="6" cols="65"></textarea>
</div>
<div class="contact-form__input-group">
<p class="contact-form__label--checkbox-group">Please send me:</p>
<input class="contact-form__input contact-form__input--checkbox" id="snacks-pizza" name="snacks" type="checkbox" value="pizza"/>
<label class="contact-form__label contact-form__label--checkbox" for="snacks-pizza">Pizza</label>
<input class="contact-form__input contact-form__input--checkbox" id="snacks-cake" name="snacks" type="checkbox" value="cake"/>
<label class="contact-form__label contact-form__label--checkbox" for="snacks-cake">Cake</label>
</div>
<input name="secret" type="hidden" value="1b3a9374-1a8e-434e-90ab-21aa7b9b80e7"/>
<button class="contact-form__button" type="submit">Send It!</button>
</form>
</section>
<div class="results">
<h2 class="results__heading">Form Data</h2>
<pre class="results__display-wrapper"><code id="JsonCompiled" class="results__display"></code></pre>
</div>
2. Next, add some basic styling to improve the visual presentation of the uploaded HTML content.
/* A simple reset. */
*,::before,::after {
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Heydon Pickering’s lobotomized owl. Details: https://bit.ly/1H7MXUD */
*+* {
margin-top: 16px;
margin-top: 1rem;
}
/* Set up fonts, colors and all that jazz. */
body {
background: #f9fdfe;
color: #686a69;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
line-height: 1.75;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings use a different font because they’re hipsters. */
h1,h2 {
color: #2a2f2c;
font-family: Lato, sans-serif;
font-weight: 300;
line-height: 1.125;
}
/* Set up general layout rules for outer containers. */
.content,.results {
width: 90vw;
max-width: 550px;
margin: 8vh auto;
}
.content__heading {
font-size: 125%;
}
.content__lede {
margin-top: 8px;
margin-top: 0.5rem;
font-size: 87.5%;
}
.results__heading {
font-size: 110%;
}
.results__display-wrapper {
margin-top: 16px;
margin-top: 1rem;
padding: 8px 16px;
padding: 0.5rem 1rem;
background: #f9fdfe;
border: 1px solid #cdcfcf;
overflow-x: scroll;
}
.contact-form {
position: relative;
display: block;
margin: 0;
padding: 16px 0 32px;
padding: 1rem 0 2rem;
border-top: 1px solid #cdcfcf;
border-bottom: 1px solid #cdcfcf;
overflow: hidden;
}
.contact-form__input-group {
margin-top: 4px;
margin-top: 0.25rem;
padding: 8px 16px;
padding: 0.5rem 1rem;
}
.contact-form__label {
display: block;
color: #414643;
font-family: Lato, sans-serif;
font-size: 75%;
line-height: 1.125;
}
.contact-form__label--checkbox-group {
display: inline-block;
margin-right: 16px;
margin-right: 1rem;
font-size: 75%;
}
.contact-form__label--checkbox,.contact-form__label--radio {
display: inline-block;
margin-left: 4px;
margin-left: 0.25rem;
}
.contact-form__input {
display: block;
margin-top: 0;
padding: 8px 12px;
padding: 0.5rem 0.75rem;
border: 1px solid #cdcfcf;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-size: 1rem;
-webkit-transition: 150ms border-color linear;
transition: 150ms border-color linear;
}
.contact-form__input--checkbox,.contact-form__input--radio {
display: inline-block;
width: auto;
}
.contact-form__input--checkbox~.contact-form__input--checkbox, .contact-form__input--radio~.contact-form__input--radio {
margin-left: 16px;
margin-left: 1rem;
}
.contact-form__input:focus,.contact-form__input:active {
border-color: #686a69;
outline: 0;
}
.contact-form__button {
display: block;
margin: 8px 16px 0;
margin: 0.5rem 1rem 0;
padding: 0 16px 2px;
padding: 0 1rem 0.125rem;
background-color: #686a69;
border: 0;
color: #f9fdfe;
font-family: lato, sans-serif;
font-size: 100%;
letter-spacing: 0.05em;
line-height: 1.5;
text-transform: uppercase;
-webkit-transition: 150ms all linear;
transition: 150ms all linear;
}
.contact-form__button:hover,.contact-form__button:active,.contact-form__button:focus {
background: #2a2f2c;
cursor: pointer;
outline: 0;
}
3. Load the following jQuery library before closing the body tag.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
4. Now, add the JavaScript functions to handle form submission and JSON generation. These functions will capture form data and convert it into a JSON object.
/**
* Checks that an element has a non-empty `name` and `value` property.
* @param {Element} element the element to check
* @return {Bool} true if the element is an input, false if not
*/
var isValidElement = function isValidElement(element) {
return element.name && element.value;
};
/**
* Checks if an element’s value can be saved (e.g. not an unselected checkbox).
* @param {Element} element the element to check
* @return {Boolean} true if the value should be added, false if not
*/
var isValidValue = function isValidValue(element) {
return !['checkbox', 'radio'].includes(element.type) || element.checked;
};
/**
* Checks if an input is a checkbox, because checkboxes allow multiple values.
* @param {Element} element the element to check
* @return {Boolean} true if the element is a checkbox, false if not
*/
var isCheckbox = function isCheckbox(element) {
return element.type === 'checkbox';
};
/**
* Checks if an input is a `select` with the `multiple` attribute.
* @param {Element} element the element to check
* @return {Boolean} true if the element is a multiselect, false if not
*/
var isMultiSelect = function isMultiSelect(element) {
return element.options && element.multiple;
};
/**
* Retrieves the selected options from a multi-select as an array.
* @param {HTMLOptionsCollection} options the options for the select
* @return {Array} an array of selected option values
*/
var getSelectValues = function getSelectValues(options) {
return [].reduce.call(options, function (values, option) {
return option.selected ? values.concat(option.value) : values;
}, []);
};
/**
* A more verbose implementation of `formToJSON()` to explain how it works.
*
* NOTE: This function is unused, and is only here for the purpose of explaining how
* reducing form elements works.
*
* @param {HTMLFormControlsCollection} elements the form elements
* @return {Object} form data as an object literal
*/
var formToJSON_deconstructed = function formToJSON_deconstructed(elements) {
// This is the function that is called on each element of the array.
var reducerFunction = function reducerFunction(data, element) {
// Add the current field to the object.
data[element.name] = element.value;
// For the demo only: show each step in the reducer’s progress.
console.log(JSON.stringify(data));
return data;
};
// This is used as the initial value of `data` in `reducerFunction()`.
var reducerInitialValue = {};
// To help visualize what happens, log the inital value, which we know is `{}`.
console.log('Initial `data` value:', JSON.stringify(reducerInitialValue));
// Now we reduce by `call`-ing `Array.prototype.reduce()` on `elements`.
var formData = [].reduce.call(elements, reducerFunction, reducerInitialValue);
// The result is then returned for use elsewhere.
return formData;
};
/**
* Retrieves input data from a form and returns it as a JSON object.
* @param {HTMLFormControlsCollection} elements the form elements
* @return {Object} form data as an object literal
*/
var formToJSON = function formToJSON(elements) {
return [].reduce.call(elements, function (data, element) {
// Make sure the element has the required properties and should be added.
if (isValidElement(element) && isValidValue(element)) {
/*
* Some fields allow for more than one value, so we need to check if this
* is one of those fields and, if so, store the values as an array.
*/
if (isCheckbox(element)) {
data[element.name] = (data[element.name] || []).concat(element.value);
} else if (isMultiSelect(element)) {
data[element.name] = getSelectValues(element);
} else {
data[element.name] = element.value;
}
}
return data;
}, {});
};
/**
* A handler function to prevent default submission and run our custom script.
* @param {Event} event the submit event triggered by the user
* @return {void}
*/
var handleFormSubmit = function handleFormSubmit(event) {
// Stop the form from submitting since we’re handling that with AJAX.
event.preventDefault();
// Call our function to get the form data.
var data = formToJSON(form.elements);
// Demo only: print the form data onscreen as a formatted JSON object.
var dataContainer = document.getElementsByClassName('results__display')[0];
// Use `JSON.stringify()` to make the output valid, human-readable JSON.
dataContainer.textContent = JSON.stringify(data, null, " ");
// ...this is where we’d actually do something with the form data...
downloadInnerHtml(fileName, 'JsonCompiled','text/html');
};
/*
* This is where things actually get started. We find the form element using
* its class name, then attach the `handleFormSubmit()` function to the
* `submit` event.
*/
var form = document.getElementsByClassName('contact-form')[0];
form.addEventListener('submit', handleFormSubmit);
function downloadInnerHtml(filename, elId, mimeType) {
var elHtml = document.getElementById(elId).innerHTML;
var link = document.createElement('a');
mimeType = mimeType || 'text/plain';
link.setAttribute('download', filename);
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
link.click();
}
var fileName = 'WebValues.json'; // You can use the .txt extension if you want
$('#downloadLink').click(function(){
downloadInnerHtml(fileName, 'JsonCompiled','text/html');
});
By following this tutorial, you’ve learned how to save HTML form data as a JSON file. This allows you to efficiently collect and store user submissions, providing valuable insights for your website or application. Experiment with the code and explore additional possibilities to enhance your form’s functionality.
