Hi Everyone,
How are you doing? I hope it is not as cold as it is here in New England. 
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>
<html>
<head>
<title>Grabbing Form Data to Display on Page</title>
<style>
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;}
</style>
<script type="text/javascript" src="../tinymce/tinymce.min.js"></script>
<!--<script type="text/javascript">
tinymce.init({
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> -->
</head>
<body>
<div>
<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>
<p id="p2">
<label>Username</label><input type="text" name="uname" id="uname" size="35" value="" />
</p>
<p id="p3">
<label>Email</label><input type="email" name="email" id="email" size="35" value="" />
</p>
<p id="p4">
<label>Major</label><input type="text" name="major" id="major" size="35" value="" />
</p>
<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>
</form>
</div>
<div id="pdada">
<table border="1">
<tr>
<th>USER</td>
<th>DATE</td>
<th>EMAIL</th>
<th>COMMENTS</td>
</tr>
<tr>
<td id="username"></td>
<td id="adate"></td>
<td id="pemail"></td>
<td id="postedc"></td>
</tr>
</table>
</div>
<script>
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";
}
else{
document.getElementById("username").innerHTML = un;
document.getElementById("adate").innerHTML = dt;
document.getElementById("postedc").innerHTML = cm;
document.getElementById("pemail").innerHTML = em;
}
}
</script>
</body>
</html>