I have been playing with this code and have yet to figure out how to do it. The code is javascript and will save a single textbox value into a text file that can later be loaded back into the textbox. The problem is that I am trying to make it work with multiple text boxes on a website but it either just works on one or it can not separate the information in the text file and just put all the same values from all the boxes into each text box.
Any idea on what I should do to make this work with seperate textboxes and load the correct info into the correct box? thanks
<html>
<body>
<table>
<tr><td>Text to Save:</td></tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave" cols="80" rows="25">
</textarea>
</td>
</tr>
<tr>
<td>Filename to Save As:</td>
<td><input id="inputFileNameToSaveAs"></input>
</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>
<script type="text/javascript">
function saveTextAsFile()
{
var textToSave =
document.getElementById("inputTextToSave").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;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
</script>
</body>
</html>
Advertisement
Answer
I’m not sure if this is what you’re looking for, but here goes:
<table>
<tr><td>Text to Save:</td></tr>
<tr>
<td colspan="3">
<textarea class="inputTextToSave" cols="80" rows="5"></textarea>
<textarea class="inputTextToSave" cols="80" rows="5"></textarea>
</td>
</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>
Here I add a second TextArea and change id for class to select all TextArea by className.
var delim = "[^~^]"
function getAllTextBoxesText() {
var allText = "";
var textBoxes = document.getElementsByClassName("inputTextToSave");
for (var i = 0; i < textBoxes.length; i++) {
allText += textBoxes[i].value + delim;
}
return allText;
}
function splitTextBox(allText) {
var textBoxesTexts = allText.split(delim);
var textBoxes = document.getElementsByClassName("inputTextToSave");
for (var i = 0; i < textBoxes.length; i++) {
if (i >= textBoxesTexts.length)
break;
textBoxes[i].value = textBoxesTexts[i];
}
}
function saveTextAsFile() {
var textToSave = getAllTextBoxesText();
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;
splitTextBox(textFromFileLoaded);
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
The idea is join all textarea’s texts in one string and later, split them. To do that, I use a delimiter. You must use some delimiter that you know won’t appear in your text. Usually, a non printable character like ΒΆ (0xB6 in hexadecimal) may be useful.
With this idea, I use getAllTextBoxesText function to join all textarea’s texts in a single string. This is the text to save with your original save function.
For the load part, we do the same: splitTextBox function only splits the text using the delimiter and set each part in one textarea. I use this function in your loadFileAsText, after get the loaded text content.
You can test here: https://jsfiddle.net/pyv5djbe/