Save data from multiple inputs from html webpage as .txt (locally) and load them back at the same places

  html, input, javascript, save

This is challenging for me as a very young programming learner with 3-4 weeks of experience in html/css and JS,but i suppose a walk in the park for an experienced developer/programmer.
Also it is my first STACK OVERFLOW post and please be forgiving if i happen to miss any of your "protocols".

I am making an extremelly simple HTML page,putting inputs and manipulate those inputs using plain Javascript.

The nature of this project is for someone to type stuff in a form with text type inputs and get automatic calculations between them (stuff that duplicate in other places,add,subtract,multiply,appear in printable areas elsewhere and generally a lot of different small operations).

I have no trouble developing such a small idea with the minimal knowledge that i have at the moment and learning on the way !

Now that i am almost near the completion of what i have in my mind,i want a method to save the data from all the different inputs in my html,close the browser (so no session storage and local storage solutions is applied (?) and then load them back to the same places as they were,so someone can continue working on the same "form" and not having to re-enter all the different data to the inputs.

Experienced developers PLEASE don’t commit suicide,and your are welcome for the big laugh you just had,i know that something like this can be conducted in a simple excel spreadsheet,and i know that different programming languages has to be used and probably server communication etc.

At the moment i need this be completed with JS script within HTML content.

I have found a seemingly very popular piece of an 8 year old code,which manages to save the data from 1 input to a .txt file (locally) and is also able to load back those data to the same input from the saved .txt file.

https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

https://thiscouldbebetter.neocities.org/texteditor.html

<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>

The creator of this piece,was asked if it was possible for someone to modify it and make it possible to save multiple inputs in 1 .txt and he replied its possible if you put your inputs within a "class",therefore create an array of all of them and then get all of their inputs using a for loop :

Okay, so it’s really hard to give HTML code examples in these
comments, because WordPress handles them out unpredictably. But
basically, replace the single textarea element from the code in the
article with a bunch of inputs that all have the same class, for
example, “inputTextToSave”. Then replace the first line of the
saveTextAsFile() function with these lines:

var textToWrite = “”; var inputsTextToSave =
document.getElementsByClassName(“inputTextToSave”); for (var i = 0; i
< inputsTextToSave.length; i++) { var inputTextToSave =
inputsTextToSave[i]; var textFromInput = inputTextToSave.value;
textToWrite += textFromInput; }

I tried to modify not only my own code to make it work,but his code as well and i cannot seem to make it get the data of more than 1 input to a single .txt and load it back.

I was hoping that if i modify his code succesfully then i would have the workframe to work on mine as well.
I hope its something really easy that i happen to overlook.

If someone can make the modification to the above mentioned code in order to save multiple inputs and load them back at the same input "boxes" i will be so gratefull!
Thanks in advance!

Source: Ask Javascript Questions

LEAVE A COMMENT