我有一个包含文本和复选框输入的 HTML 表单，我想在提交表单时将此表单数据下载到文本文件中。
我found a solution to download data from a textbox到一个文本文件中，但我不知道如何针对我需要的额外文本和复选框输入修改它。
这是我当前的代码:
<html>
<head>
<script language="Javascript">
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(Notes));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
function addTextTXT() {
document.addtext.name.value = document.addtext.name.value + ".txt"
}
</script>
</head>
<body>
<form name="addtext" onsubmit="download(this['name'].value, this[’Notes’].value)">
Notes:<input type="text" name=“Note/Users/karlahaiat/Desktop/Copia de checklist.htmls”><br>
Initials:<input type="text" name=“Initials”><br>
<input type="checkbox" name=“check_list[]” value=“Check General Health”>
<b>Check General Health.</b><br>
<input type="checkbox" name=“check_list[]” value=“Check Fluid”>
<b>Check Fluid.</b><br>
<input type="text" name="name" value="" placeholder="File Name">
<input type="submit" onClick="addTexttxt();" value="Save As TXT">
</form>
</body>
</html>上面的表格显示了我想要在我的表格中输入的字段，但是文本文件不会下载。任何有助于理解语法的帮助都会很棒!
最佳答案
您的代码非常接近工作解决方案 - 考虑对您的代码进行以下更改(如下面的代码片段所示):
- 避免在 HTML 标记中将
"与”字符混合 - 确保有效的字段名称并避免这种形式的名称属性:
name=“Note/Users/karlahaia.. - 考虑使用
addEventListener()将事件逻辑绑定(bind)到您的 HTML，而不是像您目前那样使用内联onclick、onsubmit等是 - 另外，考虑在页面通过
DOMContentLoaded事件加载后设置表单逻辑。这确保您的脚本依赖的表单和输入元素在您的脚本尝试访问它们之前存在
/* Run script after DOMContentLoaded event to ensure form element is
present */
document.addEventListener("DOMContentLoaded", function() {
/* Obtain form element via querySelector */
const form = document.querySelector('form[name="addtext"]');
/* Bind listener to forms submit event */
form.addEventListener("submit", function(event) {
/* Prevent browsers default submit and page-reload behavior */
event.preventDefault();
/* Obtain values from each field in form */
const notes = form.querySelector('input[name="notes"]').value;
const initials = form.querySelector('input[name="initials"]').value;
const checkFluid = form.querySelector('input[name="check-fluid"]').checked;
const checkHealth = form.querySelector('input[name="check-health"]').checked;
const filename = form.querySelector('input[name="name"]').value + ".txt";
/* Compose text file content */
const text = `
notes:${notes}
initials:${initials}
check health (checkbox):${checkHealth}
check fluid (checkbox):${checkFluid}
`;
/* Create temporary link element and trigger file download */
const link = document.createElement("a");
const href = "data:text/plain;charset=utf-8," + encodeURIComponent(text);
link.setAttribute("href", href);
link.setAttribute("download", filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
});<!-- Ensure that the name attribute does not include invalid characters
or nested "" which cause confusion-->
<form name="addtext">
Notes:<input type="text" name="notes" /><br /> Initials:
<input type="text" name="initials" /><br />
<input type="checkbox" name="check-health" value="Check General Health" />
<b>Check General Health.</b><br />
<input type="checkbox" name="check-fluid" value="Check Fluid" />
<b>Check Fluid.</b><br />
<input type="text" name="name" value="" placeholder="File Name" />
<input type="submit" value="Save As TXT" />
</form>希望对您有所帮助!
关于JavaScript:在没有服务器的情况下将 HTML 表单和复选框数据保存到 .txt 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56551909/