HTML: How to save form values in local folder

Question

I haven't played with HTML in over 15 years, and I've never done any other coding (I know... I'm a delight already, yeah?). This is only to be opened in browser on an offline PC for little kids. It's part of a homebrew html-based adventure game. I harvested code from several other sites to get this small bit - but idk how to make it work. I'd like kids to be able to answer the questions appropriately, and then save them as a text document (or really saved any way possible that I can view later) in the Downloads folder or any folder. There is no 'server' or any network - this is an old Windows 98 that kids play on.

edit:Something similar to this download function:https://stackoverflow.com/a/29376481/14739116

Here is what I have - please feel free to murder it:

<html><head>
<title>What did I do today?</title>
</head><body>
    
<form onsubmit="download(this['name'].value, this['form'].value)">

<h3>My name is...
<br>
<textarea rows=2 cols=25 name="text"></textarea>
<br><br>

Please select the appropriate response.
<table width="660" border>
    <tr align="center">
        <td width="500"></td>
        <td width="50">1</td>
        <td width="50">2</td>
        <td width="50">3</td>
        <td width="50">4</td>
    </tr>
    <tr align="center"> 
        <td width="500">I brushed my teeth today.</td>
        <td><input type="checkbox" id="1"></td>
        <td><input type="checkbox" id="2"></td>
        <td><input type="checkbox" id="3"></td>
        <td><input type="checkbox" id="4"></td>
    </tr>
    <tr align="center"> 
        <td width="500">I washed my hands today.</td>
        <td><input type="checkbox" id="1"></td>
        <td><input type="checkbox" id="2"></td>
        <td><input type="checkbox" id="3"></td>
        <td><input type="checkbox" id="4"></td>
    </tr>
    <tr align="center"> 
        <td width="500">I ate all of my vegetables today.</td>
        <td><input type="checkbox" id="1"></td>
        <td><input type="checkbox" id="2"></td>
        <td><input type="checkbox" id="3"></td>
        <td><input type="checkbox" id="4"></td>
    </tr>
    <tr align="center"> 
        <td width="500">I fed the fish this week.</td>
        <td><input type="checkbox" id="1"></td>
        <td><input type="checkbox" id="2"></td>
        <td><input type="checkbox" id="3"></td>
        <td><input type="checkbox" id="4"></td>
    </tr>

</table>
<br>
    <input type="submit" value="SAVE">
       
</body></html>

Simple answer is - You can not. HTML5 don't have access to your local file system. There is a way though, you can use javascript to export the data from your form into a csv file, then trick the browser to download it. — Joel Chu, Dec 01 '20 at 05:56

costaparas · Answer 1 · 2021-02-01T10:04:55.340

Your HTML is workable, though the main issue I see with it is the duplicate ids (which is invalid) -- what you would want instead is to set the value attribute.

The good thing is, you won't need a server or anything for downloading the responses as a file, as that can be done in JavaScript. You can try some of the solutions discussed here: JavaScript: Create and save file. (You just need to make sure the browser settings will download the file to your desired location by default).

You would also need to write some JS to extract the selected checkboxes & the entered name (which would be a suitable filename -- with some appropriate sanitization).

I assume on an old system like that, there's probably an old version of IE. If so, you'll be more limited with JS functionality. (If possible, try installing a later version or another browser to get things working).

Below is a snippet that works on Firefox/Chrome and IE10+ (also available in this fiddle).

The latter half of it is based on the answer that I previously linked here.

The JS will generate a CSV format of the answers and use the entered name as the filename.

You just need to set the browser settings to automatically download to your desired folder.

<html>
<head>
<title>What did I do today?</title>
</head>
<body>

<form onsubmit="saveResponses()">

<h3>My name is...</h3>
<textarea rows=2 cols=25 name="text"></textarea>
<br><br>

Please select the appropriate response.
<table width="660" border>
    <tr align="center">
        <td width="500"></td>
        <td width="50">1</td>
        <td width="50">2</td>
        <td width="50">3</td>
        <td width="50">4</td>
    </tr>
    <tr align="center">
        <td width="500">I brushed my teeth today.</td>
        <td><input type="checkbox" value="1"></td>
        <td><input type="checkbox" value="2"></td>
        <td><input type="checkbox" value="3"></td>
        <td><input type="checkbox" value="4"></td>
    </tr>
    <tr align="center">
        <td width="500">I washed my hands today.</td>
        <td><input type="checkbox" value="1"></td>
        <td><input type="checkbox" value="2"></td>
        <td><input type="checkbox" value="3"></td>
        <td><input type="checkbox" value="4"></td>
    </tr>
    <tr align="center">
        <td width="500">I ate all of my vegetables today.</td>
        <td><input type="checkbox" value="1"></td>
        <td><input type="checkbox" value="2"></td>
        <td><input type="checkbox" value="3"></td>
        <td><input type="checkbox" value="4"></td>
    </tr>
    <tr align="center">
        <td width="500">I fed the fish this week.</td>
        <td><input type="checkbox" value="1"></td>
        <td><input type="checkbox" value="2"></td>
        <td><input type="checkbox" value="3"></td>
        <td><input type="checkbox" value="4"></td>
    </tr>
</table>
<br>
<input type="submit" value="SAVE">
</form>

<script type="text/javascript">
    // StackOverflow question https://stackoverflow.com/questions/65084239
    function saveResponses() {
      // Windows-safe filename
      var name = document.getElementsByTagName('textarea')[0].value.replace(/[<>:"/\|?*]/g, ' ') + '.txt';

      var responses = [];
      var questions = document.getElementsByTagName('tr');
      for (var i = 1; i < questions.length; i++) {
        var question = questions[i].getElementsByTagName('td')[0].innerHTML;

        // Save responses in CSV format
        responses.push('"' + question + '"');
        var checkboxes = questions[i].querySelectorAll('input[type=checkbox]:checked');
        for (var j = 0; j < checkboxes.length; j++) {
          responses[responses.length - 1] += ',"' + checkboxes[j].value + '"';
        }
      }
      responses = responses.join('\r\n');
      // console.log(responses);
      download(responses, name, 'text/plain');
    }

    // Borrowed from https://stackoverflow.com/a/30832210
    function download(data, filename, type) {
        var file = new Blob([data], {type: type});
        if (window.navigator.msSaveOrOpenBlob) { // IE10+
            window.navigator.msSaveOrOpenBlob(file, filename);
        } else { // Others
            var a = document.createElement('a');
            var url = URL.createObjectURL(file);
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            setTimeout(function() {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            }, 0);
        }
    }
</script>

</body>
</html>

HTML: How to save form values in local folder

1 Answers1