I need to save an html file so it can be used in another window-CodePudding

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

CodePudding user response：

You can use localStorage.setItem (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#examples) to save the values from result.html

CodePudding user response：

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 subimit type 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-info attribute. 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 the Save As file 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
    let myHtml = '<html lang="en"><head><meta charset="utf8"><title>Results</title></head><body>';

    // did we find any inputs within our form?
    if(myInputs.length > 0) {
        for(let i = 0; i < myInputs.length; i  ) {
            let inpVal = myInputs[i].value;
            let inpInfo = myInputs[i].getAttribute('data-info');

            let tempStr = '<p><strong>'   inpInfo   '</strong> '   inpVal   '</p>';

            myHtml  = tempStr;
        }
    }

    myHtml  = '</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.