I am developing a simple html form to collect different users dataset using text input fields and radio buttons. After researching, I found a good piece of script to save to- and load from .txt file using two textbox fields as posted on this site at this link. I would like to build up on this script and add the state of (checked/unchecked) the following radio buttons:
<code><input type="radio" id="jan" name="Month" value="January" checked="checked" />
<input type="radio" id="dec" name="Month" value="December" />
</code>
<code><input type="radio" id="jan" name="Month" value="January" checked="checked" />
<input type="radio" id="dec" name="Month" value="December" />
</code>
<input type="radio" id="jan" name="Month" value="January" checked="checked" />
<input type="radio" id="dec" name="Month" value="December" />
Along with the vat textboxes, the bellow variable saves the value of checked radio button but it loads the value back to a textbox rather than maintaining the checked state of the radio buttons
<code>var radioState = document.querySelector('input[name="Month"]:checked').value;
</code>
<code>var radioState = document.querySelector('input[name="Month"]:checked').value;
</code>
var radioState = document.querySelector('input[name="Month"]:checked').value;
I would appreciate any support on this
<code>var separator = "_*_";
var textBoxes = ["inputTextToSave1", "inputTextToSave2", "Month"];
function saveTextAsFile() {
var textToSave = "";
for (var a = 0; a < textBoxes.length; a++) {
textToSave += a < textBoxes.length - 1 ? document.getElementById(textBoxes[a]).value + separator : document.getElementById(textBoxes[a]).value;
}
var textToSaveAsBlob = new Blob([textToSave], {
type: "text/plain"
});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
function loadFileAsText() {
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
var textesArray = textFromFileLoaded.split(separator);
for (var a = 0; a < textBoxes.length; a++) {
document.getElementById(textBoxes[a]).value = textesArray[a];
}
};
fileReader.readAsText(fileToLoad, "UTF-8");
}</code>
<code>var separator = "_*_";
var textBoxes = ["inputTextToSave1", "inputTextToSave2", "Month"];
function saveTextAsFile() {
var textToSave = "";
for (var a = 0; a < textBoxes.length; a++) {
textToSave += a < textBoxes.length - 1 ? document.getElementById(textBoxes[a]).value + separator : document.getElementById(textBoxes[a]).value;
}
var textToSaveAsBlob = new Blob([textToSave], {
type: "text/plain"
});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
function loadFileAsText() {
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
var textesArray = textFromFileLoaded.split(separator);
for (var a = 0; a < textBoxes.length; a++) {
document.getElementById(textBoxes[a]).value = textesArray[a];
}
};
fileReader.readAsText(fileToLoad, "UTF-8");
}</code>
var separator = "_*_";
var textBoxes = ["inputTextToSave1", "inputTextToSave2", "Month"];
function saveTextAsFile() {
var textToSave = "";
for (var a = 0; a < textBoxes.length; a++) {
textToSave += a < textBoxes.length - 1 ? document.getElementById(textBoxes[a]).value + separator : document.getElementById(textBoxes[a]).value;
}
var textToSaveAsBlob = new Blob([textToSave], {
type: "text/plain"
});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
function loadFileAsText() {
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
var textesArray = textFromFileLoaded.split(separator);
for (var a = 0; a < textBoxes.length; a++) {
document.getElementById(textBoxes[a]).value = textesArray[a];
}
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
<code><table>
<tr>
<td>Text to Save:</td>
</tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave1" cols="80" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave2" cols="80" rows="5"></textarea>
</td>
</tr>
<tr>
<input type="radio" id="id_june" name="Month" value="June" checked="checked" />
<input type="radio" id="id_december" name="Month" value="December" />
</tr>
<tr>
<td>Filename to Save As:</td>
<td><input id="inputFileNameToSaveAs"></td>
<td><button onclick="saveTextAsFile()">Save Text to File</button></td>
</tr>
<tr>
<td>Select a File to Load:</td>
<td><input type="file" id="fileToLoad"></td>
<td><button onclick="loadFileAsText()">Load Selected File</button></td>
</tr>
</table></code>
<code><table>
<tr>
<td>Text to Save:</td>
</tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave1" cols="80" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave2" cols="80" rows="5"></textarea>
</td>
</tr>
<tr>
<input type="radio" id="id_june" name="Month" value="June" checked="checked" />
<input type="radio" id="id_december" name="Month" value="December" />
</tr>
<tr>
<td>Filename to Save As:</td>
<td><input id="inputFileNameToSaveAs"></td>
<td><button onclick="saveTextAsFile()">Save Text to File</button></td>
</tr>
<tr>
<td>Select a File to Load:</td>
<td><input type="file" id="fileToLoad"></td>
<td><button onclick="loadFileAsText()">Load Selected File</button></td>
</tr>
</table></code>
<table>
<tr>
<td>Text to Save:</td>
</tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave1" cols="80" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave2" cols="80" rows="5"></textarea>
</td>
</tr>
<tr>
<input type="radio" id="id_june" name="Month" value="June" checked="checked" />
<input type="radio" id="id_december" name="Month" value="December" />
</tr>
<tr>
<td>Filename to Save As:</td>
<td><input id="inputFileNameToSaveAs"></td>
<td><button onclick="saveTextAsFile()">Save Text to File</button></td>
</tr>
<tr>
<td>Select a File to Load:</td>
<td><input type="file" id="fileToLoad"></td>
<td><button onclick="loadFileAsText()">Load Selected File</button></td>
</tr>
</table>