I will try to express my question here is code which save the form data in a table but whenever i refresh page the values disappear plzz help. It is a form related to our poultry farm and i want this form should work to have an record an most important i want a delete button too . Thanks in advance ..
<html>
<head>
<title>Get Answer</title>
<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><center>
<div>
<form name="firstform" id="firstform" method="post">
<p id="p1">
<label>Total Hens</label><input type="text" name="hen" id="hen" size="35" value="" />
</p>
<p id="p2">
<label>Total Eggs</label><input type="text" name="egg" id="egg" size="35" value="" />
</p><br>
<p id="p8">
<label>Total Cracked Eggs</label><input type="text" name="cegg" id="cegg" size="35" value="" />
</p><br>
<p id="p3">
<label>Rate</label><input type="text" name="rate" id="rate" size="35" value="" />
</p>
<p id="p4">
<label>Feed Sacks</label><input type="text" name="fs" id="fs" size="35" value="" />
</p>
<p id="p5">
<label>Week</label><input type="text" name="week" id="week" size="35" value="" />
</p>
<p id="p6">
<label>Death</label><input type="text" name="death" size="35" id="death" />
</p><br />
<input type="button" value="Save" id="button" onclick="writeToPage();" />
<input type="reset" value="Reset" id="button" />
</form>
</div></center>
<div id="pdada">
<table border="1" align="center">
<tr>
<th>Date and Time</th>
<th>Hens</th>
<th>Eggs</th>
<th>Cracked Eggs</th>
<th>Rate</th>
<th>Feed Sacks</th>
<th>Week</th>
<th>Death</th>
<th>Total Value of Perfect eggs</th>
<th>Total Value of Cracked eggs</th>
<th>Total Value including Perfect eggs and Cracked eggs</th>
</tr>
<tr>
<td id="adate"></td>
<td id="ahen"></td>
<td id="aegg"></td>
<td id="acegg"></td>
<td id="arate"></td>
<td id="afs"></td>
<td id="aweek"></td>
<td id="adeath"></td>
<td id="pe"></th>
<td id="ce"></th>
<td id="atv"></td>
</tr>
</table>
</div>
<script>
var dt = new Date();
function writeToPage(){
var hen = document.getElementById("hen").value;
var egg = document.getElementById("egg").value;
var cegg = document.getElementById("cegg").value;
var rate = document.getElementById("rate").value;
var fs = document.getElementById("fs").value;
var week = document.getElementById("week").value;
var death = document.getElementById("death").value;
var pe = ( egg * rate );
var ce = ( cegg * ( rate / 2 ) );
var tv = ( (egg * rate) + ( rate / 2 * cegg ) );
if(hen === ""){
alert("Please fill out the Hens field.");
document.getElementById("p1").style.color = "red";
document.getElementById("p1").style.fontFamily = "Arial";
document.getElementById("p1").style.fontSize = "larger";
}
else if(egg === ""){
alert("Please fill out the Eggs field.");
document.getElementById("p2").style.color = "red";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
}
else if(cegg === ""){
alert("Please fill out the Cracked Eggs field.");
document.getElementById("p8").style.color = "red";
document.getElementById("p8").style.fontFamily = "Arial";
document.getElementById("p8").style.fontSize = "larger";
}
else if(rate === ""){
alert("Please fill out the Rate field.");
document.getElementById("p3").style.color = "red";
document.getElementById("p3").style.fontFamily = "Arial";
document.getElementById("p3").style.fontSize = "larger";
}
else if(fs === ""){
alert("Please fill out Feed Sacks field.");
document.getElementById("p4").style.color = "red";
document.getElementById("p4").style.fontFamily = "Arial";
document.getElementById("p4").style.fontSize = "larger";
}
else if(week === ""){
alert("Please fill out the Week section.");
document.getElementById("p5").style.color = "red";
document.getElementById("p5").style.fontFamily = "Arial";
document.getElementById("p5").style.fontSize = "larger";
}
else if(death=== ""){
alert("Please fill out the Death section.");
document.getElementById("p6").style.color = "red";
document.getElementById("p6").style.fontFamily = "Arial";
document.getElementById("p6").style.fontSize = "larger";
}
else{
document.getElementById("adate").innerHTML = dt;
document.getElementById("ahen").innerHTML = hen;
document.getElementById("arate").innerHTML = rate;
document.getElementById("aegg").innerHTML = egg;
document.getElementById("acegg").innerHTML = cegg;
document.getElementById("afs").innerHTML = fs;
document.getElementById("aweek").innerHTML = week;
document.getElementById("adeath").innerHTML = death;
document.getElementById("pe").innerHTML = pe;
document.getElementById("ce").innerHTML = ce;
document.getElementById("atv").innerHTML = tv;
}
}
</script>
</body>
It will work once because you are not maintaining or storing the data anywhere. You are just displaying it. There are various way to store data for a web-app. You can use browser or a local DB. Though the latter is the most standard way.
To start with, you have to store those values in a database and access them using service calls to that Database through a server. You cannot maintain the state of the data using javascript alone. Imo you need to grasp these basic concepts first if you have to achieve state-maintanence of your data.
You can start by reading about Database and Server. In order to achieve this various technology stacks are available and in place. You can use anything that basically fits your needs.
Mostly a simple web application works in this order. (technology used may vary).
Database (SQL) <-> Service(Java) <-> Server (Jetty, Tomcat etc.) <-> Client (Javascript, AngularJS, etc.)
Please note that the above flow is ONE of the Many ways to achieve UI - database relationship. There are better and more efficient ways to achieve the purpose but i am stating the most basic way.
So you need to have a basic understanding about this flow in order to implement a data-storage/retrieval for your web application.
If you do not wish to use a DB refer to this link. Just follow the steps given in the page and you will have your own small DB in no time. But it will not help if you plan on expanding your app.