i want to save file in local storage and post it under the table to be able to see it… how can i do that?
<html>
<head>
<title>Offline App(Traffic Enforcement)</title>
<link rel="stylesheet" type="text/css" title="Preferred" href="popAddVio.css" />
<script type="text.javascript">
function save() {
try {
var date = document.getElementById('textDate').value;
var plate = document.getElementById('textPlate').value;
var name = document.getElementById('textName').value;
var address = document.getElementById('textAddress').value;
localStorage.lDate = date;
localStorage.lPlate = plate;
localStorage.lName = name;
localStorage.lAddress = address;
} catch (e) {
alert("Error save");
}
}
function load() {
var storedValue = localStorage.lDate;
if (storedValue) {
document.getElementById('date').value = storedValue;
}
}
</script>
</head>
<body >
<header>
<h1>Add Violations</h1>
</header>
<div id="vioForm">
<form>
<table border="0" width="400" align="center">
<tr>
<td><label>Date:</label></td>
<td><input id="vioDate" type="date" name="textDate" value="2011-01-13"/></td>
</tr>
<tr>
<td><label>Plate #:</label></td>
<td><input id="vioPlate" type="text" name="textPlate"</td>
<tr>
<td><label>Driver's Name:</label></td>
<td><input id="vioName" type="text" name="textName" /></td>
</tr>
<tr>
<td><label>Address:</label></td>
<td><input id="vioAddress" type="text" name="textAddress"/></td>
</tr>
<tr>
<td><label>Violation:</label></td>
<td><select id="combo">
<option value="move"> Moving Violation </option>
<option value="park"> Parking Violation </option>
</select></td>
</tr>
</table>
</form>
</div>
<div>
<form id="buttons">
<input type="button" value="SAVE" onclick="save()" />
<input type="button" value="CLOSE" onclick="window.close()" />
</form>
</div>
</body>
</html>
Could you elaborate a little more on what you mean by this.
You have a “save” button and a “load” button and it is clear what these should do.
But when do you want to load the saved data?
Do you want to add a “load” button, or do you want to do it on page load?
oh… if i click the “save” button it will create a new table containing the information asked in the form just below the table form… and the load will be onload…
Ok, so there are a few things you could do here to improve your code:[LIST=1]
[]It is good practise to move your JavaScript to the bottom of your page before the closing <body> tag. That way any elements it references should have loaded before it does.
[]<script type="text.javascript"> should be <script type="text/javascript">
[]You don’t need two forms.
[]You really shouldn’t use tables for layout purposes (well done for taking on board the suggestion with labels however).
[*]Inline event handlers are not a best practise. You should try and avoid them by (for example) giving your form and the buttons unique ids, then writing something like f.saveButton.onclick = save;
[/LIST]So, here’s the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Offline App(Traffic Enforcement)</title>
<style>
label{ display: inline-block; width: 100px; text-align:right; margin-right:5px;}
input[type=button]{ display: inline-block; margin-top: 15px;}
</style>
</head>
<body>
<header>
<h1>Add Violations</h1>
</header>
<div id="vioForm">
<form id="myForm">
<div id="lDate">
<label>Date:</label>
<input id="vioDate" type="date" name="textDate" value="2011-01-13"/>
</div>
<div id="lPlate">
<label>Plate #:</label>
<input id="vioPlate" type="text" name="textPlate" />
</div>
<div id="lName">
<label>Driver's Name:</label>
<input id="vioName" type="text" name="textName" />
</div>
<div id="lAddress">
<label>Address:</label>
<input id="vioAddress" type="text" name="textAddress"/>
</div>
<div id="lViolation">
<label>Violation:</label>
<select id="combo">
<option value="0">Moving Violation</option>
<option value="1">Parking Violation</option>
</select>
</div>
<input type="button" id="saveButton" value="SAVE" />
<input type="button" id="closeButton" value="CLOSE" />
</form>
</div>
<ul id="list"></ul>
<script type="text/javascript">
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
function saveData() {
try {
localStorage["lDate"] = f.textDate.value;
localStorage["lPlate"] = f.textPlate.value;
localStorage["lName"] = f.textName.value;
localStorage["lAddress"] = f.textAddress.value;
localStorage["lViolation"] = f.combo.options[f.combo.selectedIndex].value;
} catch (e) {
alert("Could not save data");
}
}
function displayUserData(){
list.innerHTML = "";
frag = document.createDocumentFragment();
for (i=0; i<formDivs.length; i++){
key = formDivs[i].id;
value = (localStorage[key] == '')? "n/a" : localStorage[key];
li = document.createElement("li");
li.innerHTML = value;
frag.appendChild(li);
}
list.appendChild(frag);
}
function loadUserData() {
for (i=0; i<formDivs.length; i++){
key = formDivs[i].id;
value = localStorage[key];
input = formDivs[i].getElementsByTagName('input')[0];
if (typeof input === 'undefined'){
f.combo.selectedIndex = value;
} else {
input.value = value;
}
}
}
var list = document.getElementById("list")
var f = document.getElementById("myForm");
var formDivs = f.getElementsByTagName("div");
f.saveButton.onclick = function(){
if (supports_html5_storage) {
saveData();
displayUserData();
} else {
alert("Your browser doesn't support this feature");
}
}
f.closeButton.onclick = function(){window.close()}
window.onload = function(){
console.log("here");
if (supports_html5_storage) {
loadUserData();
}
}
</script>
</body>
</html>
Hopefully what I have done is understandable.
Let me know if you have any questions.
this is very hard…hehe but i’ll do my best to learn it… is there any possible way to save the output to an notepad(.txt)??
Not that I know of. JavaScript has very limited access to the file system.
and is there a way to show the saved output if i refreshed the page? for example… if i press f5 the output is still there…
Sorry, I don’t understand. Show it where?
so there’s no way to save the output in an existing .txt (notepad)? nevermind the second question. hehe. how about if i want to add new local storage… like new set of output? how can i do that?
Not that I know of.
If you search Google, you find a few discussions on this subject with a few clever workarounds.
http://www.google.com/search?q=javascript+write+text+file
Definitely nothing simple, though.
As you stated, it’s quite a complicated subject (depending on your current JavaScript knowledge).
I would recommend reading up on it first.
This is an excellent reference: http://diveintohtml5.info/storage.html
No probs 
If you have any specific questions, just post back here.