我有一个带有文本和复选框输入的 HTML 表单，我想在提交表单时将此表单数据下载到文本文件中。
I 找到了从文本框下载数据的解决方案 https://stackoverflow.com/questions/13685263/can-i-save-input-from-form-to-txt-in-html-using-javascript-jquery-and-then-us到文本文件中，但我不知道如何修改它以获取我需要的附加文本和复选框输入。
这是我当前的代码：
<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 属性：
name=“Note/Users/karlahaia..
- 考虑使用
addEventListener()将事件逻辑绑定到 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>
希望有帮助！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
