I need to save an html file so it can be used in another window
Question
I have a form with 5 inputs in a file called upload.html. with localstorage, i was able to get the input values and utilize them in another file called result.html which was empty initially.
now, i want to save the updated window result.html and summon it at the click of a button which is in upload.html. How exactly do I do this
2 answers
solution1
0 2023-01-06 16:23:18
You can use localStorage.setItem ( https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#examples ) to save the values from result.html
solution2
0 2023-01-06 20:33:12
One way you can handle this is like this.
If your results.html is an entirely empty file, and it serves no other purpose, other than to store the results received from your form, you could avoid having it at all, and just make it through your JS code.
Some notes before we continue with the code:
- I'm ignoring the HTML part of your upload.html, and just posting the relevant JavaScript
- I'm assuming that your inputs are within a form, which has a
subimittype button - I am also assuming that your inputs are of the type text, number, password, or email, and that you are not using checkboxes, radio buttons, select elements, textareas, etc. I am making this assumption, for simplicity
- in order to avoid chasing down labels, and to avoid checking how and if they are paired with your inputs, I'm suggesting that your inputs contain a
data-infoattribute. The contents of that attribute can be any kind of text which explains the input - you can even repeat the question there, though that's not really advisable - because I'm using
showSaveFilePicker, opening of theSave Asfile dialogue will only work in some of the browsers , and it will not work on mobile devices.
If you are comfortable with these assumptions, and they work for you, read on.
const myBtn = document.getElementById("myBtn");
myBtn.onclick = async (e) => {
const options = {
types: [
{
description: "Results",
accept: {
"text/html": [".html"],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
const writable = await handle.createWritable();
// we don't want to submit the form
e.preventDefault();
// let's get the inputs and their values
let myInputs = document.querySelectorAll("#myForm input");
// dummy results.html + table included, as it was asked in the comment
let myHtml = '<html lang="en"><head><meta charset="utf8"><title>Results</title></head><body><table><thead><tr><th>#</th><th>Question</th><th>Answer</th></thead><tbody>';
// did we find any inputs within our form?
if(myInputs.length > 0) {
// to mark our rows
let counter = 0;
for(let i = 0; i < myInputs.length; i++) {
counter++;
let inpVal = myInputs[i].value;
let inpInfo = myInputs[i].getAttribute('data-info');
// building the rows
let tempStr = '<tr><td>` + counter + '</td><td><strong>' + inpInfo + '</strong></td><td>' + inpVal + '</td></tr>';
myHtml += tempStr;
}
}
myHtml += '</tbody></table></body></html>';
await writable.write(myHtml);
await writable.close();
return handle;
};
You would need to adapt the code somewhat, in order for it to work for you - for example, you'd have to replace myBtn with the actual ID of your submit button, replace the #myForm with the ID of your actual form, etc.
If you have multiple forms, you could expand this, to capture the inputs from all of them, but then you would have to have a single button responsible for all of the forms (which would be unusual, to say the least). Also, if you have different types of form elements within the form, you would need to modify the example, by adding additional checks and loops for checkboxes, radiobuttons, etc.
EDIT Corrected a serious mistake in the code, and added an actual downloading.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.