Problem
Summary
HTML form designed for offline use is not exporting/importing data correctly. Is there a noob-friendly solution?
Details
This form was designed so that users could open the HTML form, fill it out, and export the data as a pip-delimited .txt file.
It can import/export various fields like Name, Gender and City. However, it cannot import/export Snack Preferences and Dinner Preferences. In our dataset, this means that member 'Ravenous Kitty' will be served Soup instead of Bird, as well as cheese (unwanted).
The initial form is empty:
You can fill the form out and click the button 'save data to file':
But when you use 'Choose File' button to import that same data, the entries become mixed up:
Code
Encodedna code has been repurposed to fit the problem. It consists of three sections:
- HTML form
- Data export section
- Data import section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Offline Form 0.1</title>
</head>
<body>
<div>
<input type="file" name="inputfile" id="inputfile">
</div>
<fieldset>
<legend>Elite Club Member</legend>
<!-- Static -->
<b>Name:</b>
<div id="Name"></div>
<b>DoB:</b>
<input type="date" id="DoB"/><br>
<!-- dropdown, prefilled -->
<b>Gender:</b>
<select id="Gender" name="Gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<br>
<!-- prefilled, but editable-->
<b>City:</b>
<input type="text" id="City"/><br>
</fieldset>
<!-- PROBLEM -->
<fieldset>
<legend>Snack Preferences</legend>
<input type="checkbox" id="cheeseLover" name="cheeseLover">Member loves cheese.
<br>
<input type="checkbox" id="milkLover" name="milkLover">Member loves milk.
<br>
</fieldset>
<!-- PROBLEM -->
<fieldset>
<legend>Dinner Preference</legend>
<ol>
<li>
<legend>Choose among the various dinner options</legend>
<p><label> <input type="radio" id="dinnerPizza" name="dinnerOptions" value="dinnerPizza">Pizza</label></p>
<p><label> <input type="radio" id="dinnerSalad" name="dinnerOptions" value="dinnerSalad">Salad</label></p>
<p><label> <input type="radio" id="dinnerBird" name="dinnerOptions" value="dinnerBird">Bird</label></p>
<p><label> <input type="radio" id="dinnerSoup" name="dinnerOptions" value="dinnerSoup">Soup</label></p>
</li>
</ol>
</fieldset>
<!-- Save button -->
<div>
<input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
</div>
<script type="text/javascript">
document.getElementById('inputfile').addEventListener('change', function() {
var fr=new FileReader();
fr.onload=function(){
var output_data=fr.result;
var output_data_lines = output_data.split('\n');
for(var i = 0; i < output_data_lines.length; i++){
<!-- Patient Info -->
if (output_data_lines[i].split('|')[0] == 'Name') {
document.getElementById('Name').textContent = output_data_lines[i].split('|')[1];
}
else if (output_data_lines[i].split('|')[0] == 'DoB') {
document.getElementById('DoB').value = output_data_lines[i].split('|')[1];
}
else if (output_data_lines[i].split('|')[0] == 'Gender') {
document.getElementById('Gender').value = output_data_lines[i].split('|')[1];
}
<!-- Extra Info -->
else if (output_data_lines[i].split('|')[0] == 'City') {
document.getElementById('City').value = output_data_lines[i].split('|')[1];
}
<!-- PROBLEM -->
<!-- Snack Preference -->
else if (output_data_lines[i].split('|')[0] == 'cheeseLover') {
document.getElementById('cheeseLover').checked = output_data_lines[i].split('|')[1];
}
else if (output_data_lines[i].split('|')[0] == 'milkLover') {
document.getElementById('milkLover').checked = output_data_lines[i].split('|')[1];
}
<!-- PROBLEM -->
<!-- Dinner Preferences -->
else if (output_data_lines[i].split('|')[0] == 'dinnerPizza') {
document.getElementById('dinnerPizza').checked = output_data_lines[i].split('|')[1];
}
else if (output_data_lines[i].split('|')[0] == 'dinnerSalad') {
document.getElementById('dinnerSalad').checked = output_data_lines[i].split('|')[1];
}
else if (output_data_lines[i].split('|')[0] == 'dinnerBird') {
document.getElementById('dinnerBird').checked = output_data_lines[i].split('|')[1];
}
else if (output_data_lines[i].split('|')[0] == 'dinnerSoup') {
document.getElementById('dinnerSoup').checked = output_data_lines[i].split('|')[1];
}
}
}
fr.readAsText(this.files[0]);
})
</script>
<!-- import data -->
<script>
let saveFile = () => {
// Get the data from each element on the form.
<!-- Elite Member Info -->
const Name = document.getElementById('Name').textContent;
const DoB = document.getElementById('DoB').value;
const Gender = document.getElementById('Gender').value;
const City = document.getElementById('City').value;
<!-- PROBLEM -->
<!-- Snack Preferences -->
const cheeseLover = document.getElementById('cheeseLover').checked;
const milkLover = document.getElementById('milkLover').checked;
<!-- PROBLEM -->
<!-- Dinner Preferences -->
const dinnerPizza = document.getElementById('dinnerPizza').checked;
const dinnerSalad = document.getElementById('dinnerSalad').checked;
const dinnerBird = document.getElementById('dinnerBird').checked;
const dinnerSoup = document.getElementById('dinnerSoup').checked;
// This variable stores all the data.
let data =
'Name|' + Name + '\n' +
'DoB|' + DoB + '\n' +
'Gender|' + Gender + '\n' +
'City|' + City + '\n' +
'cheeseLover|' + cheeseLover + '\n' +
'milkLover|' + milkLover + '\n' +
'dinnerPizza|' + dinnerPizza + '\n' +
'dinnerSalad|' + dinnerSalad + '\n' +
'dinnerBird|' + dinnerBird + '\n' +
'dinnerSoup|' + dinnerSoup
;
// Convert the text to BLOB.
const textToBLOB = new Blob([data], { type: 'text/plain' });
const sFileName = 'formData.txt'; // The file to save the data.
let newLink = document.createElement("a");
newLink.download = sFileName;
if (window.webkitURL != null) {
newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
newLink.href = window.URL.createObjectURL(textToBLOB);
newLink.style.display = "none";
document.body.appendChild(newLink);
}
newLink.click();
}
</script>
</body>
</html>
from HTML/JS form not importing/exporting txt correctly
No comments:
Post a Comment