Can someone please assist me in finding a solution to this problem? I have 3 input fields where users can type in their answers. There is also a "SAVE" button that allows users to download their input values into a file.txt. Additionally, there is a "choose file" button that enables users to load the values from the saved file back into the input fields.
Note: The saved file can be in any format, not necessarily ["111", "222", "333"].
function save_func() {
var quest1 = document.getElementById("Question1").value;
var quest2 = document.getElementById("Question2").value;
var quest3 = document.getElementById("Question3").value;
var data = [];
data.push(quest1);
data.push(quest2);
data.push(quest3);
var data_string = JSON.stringify(data);
var file = new Blob([data_string], {
type: "text"
});
var anchor = document.createElement("a");
anchor.href = URL.createObjectURL(file);
anchor.download = "MyProject.txt";
anchor.click();
}
function load_func() {
var file = document.getElementById("load").files[0];
var reader = new FileReader();
reader.onloadend = function() {
var load = JSON.parse(reader.result)[0];
document.getElementById("inputs").value = load;
};
reader.readAsText(file);
}<form id="inputs">
<label for="Question1">Question 1</label>
<br />
<input type="text" id="Question1" class="input-box" name="Question1name" /><br />
<br />
<label for="Question2">Question 2</label>
<br />
<input type="text" id="Question2" class="input-box" name="Question2name" /><br />
<br />
<label for="Question3">Question 3</label>
<br />
<input type="text" id="Question3" class="input-box" name="Question3name" /><br />
<br />
<button onclick="save_func()">Save</button> And To Load A Project <input id="load" type="file" value="load" onchange="load_func()">
</form>