setup field:
My code takes input from enduser and stores that form data in one text file.
info field: here you can see form data(text file) which we stored before.
My Requirement is: want to show form data which we stored, on html form.
for ex: my text file contains: Device ID: SLSK10209849, this data has to show in html form input field
Totally, how to show text file form data in HTML form input fields
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: #A9A9A9;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
border-radius: 15px;
}
.hide {
display: none;
}
</style>
<div class="button" onclick="switch_div(1);">
Setup
</div>
<div class="button" onclick="switch_div(2);">
Info
</div>
<title>setup/info</title>
<div class="content hide" id="show_1">
<script language="Javascript" >
function download() {
var filename = window.document.myform.docname.value;
var name = window.document.myform.name.value;
var meterno = window.document.myform.meterno.value;
var volth= window.document.myform.volth.value;
var curth= window.document.myform.curth.value;
var sht= window.document.myform.sht.value;
var seasonal= window.document.myform.seasonal.value;
var mno= window.document.myform.mno.value;
var imno= window.document.myform.imno.value;
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
"Device ID: " + encodeURIComponent(name) + "nn" +
"Meter Number: " + encodeURIComponent(meterno) + "nn" +
"Voltage Threshold: " + encodeURIComponent(volth) + "nn" +
"Current Threshold: " + encodeURIComponent(curth) + "nn" +
"Server Hit Time: " + encodeURIComponent(sht) + "nn" +
"Seasonal: " + encodeURIComponent(seasonal) + "nn" +
"Mobile No: " + encodeURIComponent(mno) + "nn" +
"IMEI Number: " + encodeURIComponent(imno) + "nn" +
encodeURIComponent(""));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form name="myform" method="post" >
<label> File Name:</label>
<input type="text" id="docname" value="name.txt" /><br/><br/>
<label> Device ID:</label>
<input type="text" id="name" /><br/><br/>
<label> Meter Number:</label>
<input type="text" id="meterno" /><br/><br/>
<label> Voltage Threshold:</label>
<input type="text" id="volth" /><br/><br/>
<label> Current Threshold:</label>
<input type="text" id="curth" /><br/><br/>
<label> Server Hit Time:</label>
<input type="text" id="sht" /><br/><br/>
<label> Date:</label>
<input type="date" id="seasonal"><br/><br/>
<label> Mobile Number:</label>
<input type="text" id="mno" /><br/><br/>
<label> IMEI Number:</label>
<input type="text" id="imno" /><br/><br/>
<input id="download_btn" type="submit" class="btn" style="width: 125px" onClick="download();" />
</form>
</body>
</div><br/><br/><br/><br/>
<div class="content hide" id="show_2">
<body>
<input type="file" name="inputfile"
id="inputfile">
<br>
<pre id="output"></pre>
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function() {
var fr=new FileReader();
fr.onload=function(){
document.getElementById('output')
.textContent=fr.result;
}
fr.readAsText(this.files[0]);
})
</script>
</body>
</div>
<script>
function switch_div(show) {
document.getElementById("show_"+show).style.display = "block";
document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
}
</script>
</html>