Menu
HTML form designed for offline use is not exporting/importing data correctly. Is there a noob-friendly solution?
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:
Encodedna code has been repurposed to fit the problem. It consists of three sections:
<!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>
897
It's an issue with string/boolean parsing.
This is an example of your current code:
document.getElementById('milkLover').checked = output_data_lines[i].split('|')[1];
Which is effectively translating to this, which is incorrect:
document.getElementById('milkLover').checked = 'false';
It should be this, a boolean:
document.getElementById('milkLover').checked = false;
The 'checked' property is looking for a boolean value, but you're passing a string instead. Anything that isn't 0, false, or a reference to an object holding either will automatically pass as true. You need to parse your input from string, into boolean. You can do that quite simply with something like this (as far as I know, this is the only way to parse strings as booleans in Javascript):
var isTrueSet = (output_data_lines[i].split('|')[1] === 'true');
document.getElementById('milkLover').checked = isTrueSet;
If you use this temporary variable to parse all your strings to booleans within each 'if' statement for a checkbox or radio field, your code runs perfectly - as seen here
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
