can i display my text file data in html form input field? if yes, please tell me how?

Question

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:

 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) + "\n\n" + "Meter Number: " + encodeURIComponent(meterno) + "\n\n" + "Voltage Threshold: " + encodeURIComponent(volth) + "\n\n" + "Current Threshold: " + encodeURIComponent(curth) + "\n\n" + "Server Hit Time: " + encodeURIComponent(sht) + "\n\n" + "Seasonal: " + encodeURIComponent(seasonal) + "\n\n" + "Mobile No: " + encodeURIComponent(mno) + "\n\n" + "IMEI Number: " + encodeURIComponent(imno) + "\n\n" + encodeURIComponent("")); pom.setAttribute('download', filename); pom.style.display = 'none'; document.body.appendChild(pom); pom.click(); document.body.removeChild(pom); } document.getElementById('inputfile').addEventListener('change', function() { var fr = new FileReader(); fr.onload = function() { document.getElementById('output').textContent = fr.result; } fr.readAsText(this.files[0]); }) function switch_div(show) { document.getElementById("show_" + show).style.display = "block"; document.getElementById("show_" + ((show == 1)? 2: 1)).style.display = "none"; }

 .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; }

 <div class="button" onclick="switch_div(1);"> Setup </div> <div class="button" onclick="switch_div(2);"> Info </div> <div class="content hide" id="show_1"> <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> </div><br/><br/><br/><br/> <div class="content hide" id="show_2"> <input type="file" name="inputfile" id="inputfile"> <br> <pre id="output"></pre> </div>

Answer 1

Here is one way

I am assuming a file exactly on the format

Device ID: did1

Meter Number: mnr1

Voltage Threshold: VT

Current Threshold: CT

Server Hit Time: SHT

Seasonal: Summer

Mobile No: 123456789

IMEI Number: 123984712349871320

 function switch_div(show) { document.getElementById("show_" + show).style.display = "block"; document.getElementById("show_" + ((show == 1)? 2: 1)).style.display = "none"; } const fieldNames = { "Device ID": "name", "Meter Number": "meterno", "Voltage Threshold": "volth", "Current Threshold": "curth", "Server Hit Time": "sht", "Seasonal": "seasonal", "Mobile No": "mno", "IMEI Number": "imno" }; document.getElementById('inputfile').addEventListener('change', function() { var fr = new FileReader(); fr.onload = function() { const lines = fr.result.split(/(?:\r?\n)+/); lines.forEach(line => { const [desc, val] = line.split(": "); const name = fieldNames[desc]; document.myform[name].value = val; }); } fr.readAsText(this.files[0]); })

 .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; }

 <div class="button" onclick="switch_div(1);"> Setup </div> <div class="button" onclick="switch_div(2);"> Info </div> <div class="content hide" id="show_1"> <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> </div><br/><br/><br/><br/> <div class="content hide" id="show_2"> <input type="file" name="inputfile" id="inputfile"> <br> </div>