Observations:
- Every HTML 5 valid document should have a doctype mentioned at the very beginning, like so:
<!DOCTYPE html>
2. Your approach is good, but the click() method on anchors is deprecated in Firefox. So we have to manually dispatch the click event, on the hidden anchor containing the URLEncoded of our TXT file.
Quoted from https://stackoverflow.com/a/1421770/8896148
The click method is intended to be used with INPUT elements of type
button, checkbox, radio, reset or submit. Gecko does not implement the
click method on other elements that might be expected to respond to
mouse–clicks such as links (A elements), nor will it necessarily fire
the click event of other elements.
Non–Gecko DOMs may behave differently.
The function name in onClick="addTexttxt()" was misspeled. It's addTextTXT(). JavaScript is case sensitive!
Instead of directly calling the download(filename, text) function, we should call an intermediary function instead, which will have to collect all the data from your form, and make it into a nice text string. And then, we will pass that string to the download function to make it into a file ready for download.
In onsubmit="someFunctionCall()" we should return false if we don't wish to navigate away from the page (or reload it). So we pas to onsubmit the value returned by someFunctionCall() by adding a return in front of the call: onsubmit="return someFunctionCall()". This way, we can decide inside the someFunctionCall() if we want to navigate away or not by returning true or false.
Text descriptions for checkbox and radio should be placed inside <label for="idOfTheInput">, so the user can click on the text and the checkbox will still activate.
Here is the updated version
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script language="Javascript" >
function download(filename, text){
var pom = document.createElement('a');
pom.style.display = 'none';
document.body.appendChild(pom);
pom.setAttribute('download', filename);
pom.setAttribute('href', 'data:text/plain;charset=utf-8,'
+ encodeURIComponent(text));
pom.click();
document.body.removeChild(pom);
}
//- SIDE NOTE for addTextTXT()
//- This function works as it is, but it's a little sketchy using
//- document.addtext directly inside it. The input we want to check
//- should be passed as a parameter, if in the future we wish to
//- extend this code to work with multiple forms in the same page.
//- It's good for now, though
function addTextTXT(){
//- You may as well do some field validation here, and rename this
//- function validate()
//- Check if the last 4 characters of filename are already ".txt" or ".TXT"
//- or any other variation of lower-case and upper-case
if(document.addtext.filename.value.substr(-4).toLowerCase() != ".txt"){
//- Append ".txt" if missing
document.addtext.filename.value += ".txt"
}
}
//- This function collects all the data present inside the form
//- formats it accordingly, and passes the entyre text content
//- to the download() function above
function downloadData(formElement){
//- We start with an initially empty file content
var text = "";
//- We iterate over all the form's inputs
for(var i=0; i<formElement.length; i++){
var input = formElement[i];
//- We discard the submit button and the filename field.
//- If you remove this if statement the file will contain
//- all the inputs.
if(input.type == "text" && input.name != "filename"){
//- We append to the file content the name of the fiend
//- and it's value in single quotes (i like to quote them
//- to spot empty fields or to easily debug them later)
//- We append after each value an epty line: \n
text += input.name + "='" + input.value + "'\n";
}else if(input.type =="checkbox"){
text += "[" + (input.checked ? "x" : " ") + "] " + input.name + "\n";
}
}
//- Now the text variable contains all the info, so we send it
//- for downloading
download(formElement.filename, text);
//- If we wish, we prevent navigation or page reload by returning false
return false;
}
</script>
</head>
<body>
<form name="addtext" onsubmit="return downloadData(this);">
Notes:<input type="text" name=“Notes” value=""><br>
Initials:<input type="text" name=“Initials” value=""><br>
<input type="checkbox" name="Check General Health"> <b>Check General Health.</b><br>
<input type="checkbox" name="Check Fluid"> <b>Check Fluid.</b><br>
<input type="text" name="filename" placeholder="File Name">
<input type="submit" onClick="addTextTXT();" value="Save As TXT">
</form>
</body>
</html>
