Writing/Saving Form Data to HTML Page with Only JavaScript

Hi Everyone,

How are you doing? I hope it is not as cold as it is here in New England. :wink:

In any case, I have been attempting creating an HTML form where JavaScript grabs the form data and save it permanently to the page. I know this is possible with PHP, ASP .NET, C# … etc. I do not want to use any server side scripting language. This needs to be only client side.

I have the form created, and of course, I use the innerHTML method to write it to the page, but once reload, that info is gone. How can I permanently write the form data to the page without any server-side scripting language?

Here is my code for now:

<!DOCTYPE html>
		<title>Grabbing Form Data to Display on Page</title>
			body{ height: 680px; margin: 20px; padding: 10px; border: 2px solid #033371; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
			p { display: table-row;}
			label { margin-right: 40px; display: table-cell; width: 120px; }
        		input { margin-bottom: 5px; display: table-cell; padding:5px; border:1px solid #999;border-radius:4px; -moz-border-radius:4px;-web-kit-border-radius:4px;-khtml-border-radius:4px;
			button{ background-color: #bde2f9; font-weight: 600;}
			table, th { border: 1px solid black;}
			td{font-weight:heavy; width:160px; color:red; text-align: center;}


		<script type="text/javascript" src="../tinymce/tinymce.min.js"></script>
		<!--<script type="text/javascript">
            			selector: "#newcom",
            			auto_focus: "newcom",
            			skin: "xenmce",
            			width: 750,
            			height: 250,
            			plugins: [
                 			"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                			"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                 			"save table contextmenu directionality emoticons template paste textcolor "
           			content_css: "css/content.css",
           			toolbar: "insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor", 
           			style_formats: [
                			{title: 'Bold text', inline: 'b'},
                			{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                			{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                			{title: 'Example 1', inline: 'span', classes: 'example1'},
                			{title: 'Example 2', inline: 'span', classes: 'example2'},
                			{title: 'Table styles'},
                			{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
		</script> -->
				<form name="firstform" id="firstform" method="post">
					<p id="p1">
						<label>Full Name</label><input type="text" name="fname" id="fname" size="35" value="" />
					<p id="p2">
						<label>Username</label><input type="text" name="uname" id="uname" size="35" value="" />
					<p id="p3">
						<label>Email</label><input type="email" name="email" id="email" size="35" value="" />
					<p id="p4">
						<label>Major</label><input type="text" name="major" id="major" size="35" value="" />
					<p id="p5">
						<label>Comments</label><textarea name="newcom" cols="37" rows="10" id="newcom"></textarea>
					</p><br />
					<button type="button" onclick="writeToPage();">Add Comment</button>
		<div id="pdada">
			<table border="1">
					<td id="username"></td>
					<td id="adate"></td>
					<td id="pemail"></td>
					<td id="postedc"></td>
					var dt = new Date();
			function writeToPage(){

					var fn = document.getElementById("fname").value;
					var un = document.getElementById("uname").value;
					var em = document.getElementById("email").value;
					var cm = document.getElementById("newcom").value;

					if(fn === ""){
						alert("Please fill out the Full Name field.");
						document.getElementById("p1").style.color = "red";
						document.getElementById("p1").style.fontFamily = "Arial";
						document.getElementById("p1").style.fontSize = "larger"; 
					else if(un === ""){
						alert("Please fill out the Username field.");
						document.getElementById("p2").style.color = "red";
						document.getElementById("p2").style.fontFamily = "Arial";
						document.getElementById("p2").style.fontSize = "larger";
					else if(em === ""){
						alert("Please fill out email field.");
						document.getElementById("p3").style.color = "red";
						document.getElementById("p3").style.fontFamily = "Arial";
						document.getElementById("p3").style.fontSize = "larger";
					else if(cm === ""){
						alert("Please fill out the comment section.");
						document.getElementById("p5").style.color = "red";
						document.getElementById("p5").style.fontFamily = "Arial";
						document.getElementById("p5").style.fontSize = "larger";

						document.getElementById("username").innerHTML = un;
						document.getElementById("adate").innerHTML = dt;
						document.getElementById("postedc").innerHTML = cm;
						document.getElementById("pemail").innerHTML = em;


That requires server side processing. Anything run in the client would only be visible to the one visitor and only until the storage used to save it expired.


Thank you very much for the quick response, but in truth I knew that server side scripting would need to be involved, otherwise any stored data would be only temporary to the duration of the session lifetime.

I was hoping–kinda shooting in the dark–that someone out there had tried something crazy enough that resemble what i need to accomplish, with the hope on coaching me through the process.

I have this proprietary desktop application that is used to create forms, but in the database where the form objects are stored, individual form fields are not stored separately; the whole form is saved as an image. That does cause lots of inconveniences and grieves.

if the form data could be saved into an HTML file separately, then keyword search could be used to it. I’ll start getting busy with C#. Thanks a bunch!


Sam Grayson

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.