I created an online form with several fields, and I want the ability to save the progress and load it again later.
When I save it, it seems to work okay (all the info is in the json file) but when I load the saved file, not all the data is added back into the online form. Specifically the values for “regions” and “borders” are not loaded.
Can anyone see what I’m missing? Thanks.
/**
* Saves the progress of the form inputs to a JSON file.
*/
function saveProgress() {
const settingsForm = document.getElementById('settingsForm');
const regionsForm = document.getElementById('regionsForm');
const bordersForm = document.getElementById('bordersForm');
const commandsForm = document.getElementById('commandsForm');
const settingsData = new FormData(settingsForm);
const regionsData = new FormData(regionsForm);
const bordersData = new FormData(bordersForm);
const commandsData = new FormData(commandsForm);
let jsonObject = {};
settingsData.forEach((value, key) => {
if (key === 'deployments') {
jsonObject[key] = value;
} else if (key === 'size' || key === 'difficulty') {
jsonObject[key] = document.querySelector(`input[name="${key}"]:checked`).value;
} else {
jsonObject[key] = value;
}
});
regionsData.forEach((value, key) => {
jsonObject[key] = value;
});
bordersData.forEach((value, key) => {
jsonObject[key] = value;
});
commandsData.forEach((value, key) => {
jsonObject[key] = value;
});
jsonObject["regions"] = document.getElementById('regions').value;
jsonObject["borders"] = document.getElementById('borders').value;
const jsonString = JSON.stringify(jsonObject, null, 2);
const blob = new Blob([jsonString], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'progress.json';
downloadLink.click();
URL.revokeObjectURL(url);
}
/**
* Loads the progress from a JSON file and populates the form inputs.
*/
function loadProgress() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'application/json';
fileInput.onchange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const jsonObject = JSON.parse(e.target.result);
document.getElementById('engine').value = jsonObject.engine || '1';
document.getElementById('version').value = jsonObject.version || '1';
document.getElementById('title').value = jsonObject.title || '';
document.getElementById('key').value = jsonObject.key || '';
document.querySelector(`input[name="size"][value="${jsonObject.size}"]`).checked = true;
document.querySelector(`input[name="difficulty"][value="${jsonObject.difficulty}"]`).checked = true;
document.getElementById('players').value = jsonObject.players || '2,3,4,5,6,7,8,9,10,12,14,15,16,18,20,21,22,24';
document.getElementById('objectives').value = jsonObject.objectives || 'Standard, Assassin, Mercenary';
document.getElementById('reserves').value = jsonObject.reserves || 'Escalate, Escalite, FlatRate(6)';
document.getElementById('reinforcements').value = jsonObject.reinforcements || 'Border, Path, Anywhere';
document.getElementById('initialTroops').value = jsonObject.initialTroops || '3';
document.getElementById('kind').value = jsonObject.kind || '';
document.getElementById('deployments').value = jsonObject.deployments || '';
document.getElementById('regions').value = jsonObject.regions || '';
document.getElementById('borders').value = jsonObject.borders || '';
document.getElementById('command').value = jsonObject.command || '';
};
reader.readAsText(file);
}
};
fileInput.click();
}
This is what the saved json file looks like
{
"engine": "1",
"version": "1",
"title": "test-new",
"key": "test-new",
"size": "Medium",
"difficulty": "Intermediate",
"players": "2,3,4,5,6,7,8,9,10,12,14,15,16,18,20,21,22,24",
"objectives": "Standard, Assassin, Mercenary",
"reserves": "Escalate, Escalite, FlatRate(6)",
"reinforcements": "Border, Path, Anywhere",
"initialTroops": "3",
"regions": "region1nr2",
"borders": "r1,r2nr2,r3",
"command": ""
}
But the regions and borders won’t load into the form again.
