将HTML输入下载到C盘本地文件夹的文本文件中

Question

将HTML输入下载到C盘本地文件夹的文本文件中

3

我刚开始学习，并与同学们一起创建了一个在线工作簿，但无法将答案下载为文本文件。尽管文件已经下载，但当我们打开文件时，会出现"undefined"。这段代码可以在Outlook中使用，但是学生们没有Outlook，他们使用基于Web的Office 365电子邮件。我不允许使用我们的SMTP服务器发送电子邮件。邮件内容如下：姓名=学生姓名，在此处显示答案1.1=在此处显示答案1.2=1.3=1.4=1.5=1.6=以此类推。下面是我的代码示例：

<form onsubmit="download(this['name'].value, ['text'].value, ['id'].value)">


<h4>Students Name<input type="text" name="Name" value="" size="50"><br></h4>
 <br>
<h4>1. Why is it important to think about safety?</h4>

<p><label for="q1"><input type="radio" name="1.1" value=" A" id="q1a" />it identifies where the risks are.</label></p>
<p><label for="q1"><input type="radio" name="1.1" value=" B" id="q1b" />because I may get hurt.</label></p>
<p><label for="q1"><input type="radio" name="1.1" value=" C" id="q1c" />because it may prevent accidents and keep everyone safe.</label></p>
<p><label for="q1"><input type="radio" name="1.1" value=" D" id="q1d"/>because it will keep others safe.</label></p>
<br>


<h4>11. Respirators should be used to prevent?</h4>
<input type="text" name="1.11" id="1.11" size= "120"></p>
<br>
<h4>12. Disposable gloves are optional but do provide a convenient way to avoid?</h4>

<input type="text" name="1.12" id="1.12" size= "120"></p>
<br>
<h4>13. Why should you prevent liquid oil and grease from entering the pores of your skin?</h4>

<input type="text" name="1.13" id="1.13" size= "120"></p>
<br>

<h4>14. Why shouldn't we use hot water to wash off grease and oil off our hands?</h4>


<input type="text" name="1.14" id="1.14" size= "120"></p>
<br>

<h4>15. List 3 things that may cause a fire or act as a fuel?</h4>
<p>a.   <input type="text" name="1.15a" id="1.15a" size= "117"></p>
<p>b.   <input type="text" name="1.15b" id="1.15b" size= "117"></p>
<p>c.   <input type="text" name="1.15c" id="1.15c" size= "117"></p>

  <input type="submit" value="Download">
  </style>
<script language="Javascript" >
function download(filename, text) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 

encodeURIComponent(text));
  pom.setAttribute('download', filename);

  pom.style.display = 'none';
  document.body.appendChild(pom);

 pom.click();

  document.body.removeChild(pom);
}
</script>

- Macca

谢谢，正如您从我的问题中所看到的，我对编码非常新。我和我的学生们想出了一个安全网页，在学校内部使用，并希望将输入数据保存到文本文件中。问题是，我可以使用form method=post action=mailto将其发送到Outlook邮箱，但我的学生们无法访问Outlook，因此我们希望将其保存为可下载的文本文件到他们的计算机上。 - Macca

这里有几个问题：<h4>1. 呼吸器应该用于预防什么？</h4> <input type="text" name="1.1" id="1.1" size= "120"></p> <br><h4>2. 一次性手套是可选的，但提供了一个方便的方法以避免什么？</h4> <input type="text" name="1.2" id="1.2" size= "120"></p> <br> - Macca

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Olafant · Accepted Answer

如果我理解你的问题正确，问题在于你使用未定义的参数调用了下载函数。要获取表单中的数据，你可以循环遍历。

document.getElementById('yourFrom').elements

将文本翻译为中文：

并将名称-值对保存在一个对象中。然后，您可以将该对象传递给下载函数。

我的示例代码在函数中收集表单数据

getFormData()

通过单击按钮而不是提交表单来调用该功能。

由于您在问题表单中有单选按钮，因此循环应该检查它并仅保存所选值。我在示例代码中放置了注释以说明如何实现此操作。

我已经注释掉了该函数。

download()

因为我认为让这里的人们下载文件并不是一个好主意。但是，当您打开浏览器的开发工具时，您可以看到文件中保存的内容。因此，我放置了这行代码。

console.log(...);

我也在代码片段中的表单中放了一些示例值，以方便使用。

function download(filename, text) {
  /*var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  pom.setAttribute('download', filename);
  pom.setAttribute('target', new Date());
  pom.style.display = 'none';
  document.body.appendChild(pom);
  pom.click();
  document.body.removeChild(pom);*/
  console.log('filename: ' + filename);
  console.log('text: ' + text);
}

/* get the Data from questions form */
function getFormData() {
  var form = document.getElementById("questionsForm");
  var questions = form.elements;
  var ret_obj ={};
  var radios = [];
  for(var i = 0 ; i < questions.length ; i += 1){
    var item = questions.item(i);
    if (item.type == 'radio') {
      /* if question input type is radio */
      if (radios.indexOf(item.name) == -1) {
         /* safe radio group name in array radios
         to prevent check on other radios of the same group */
        radios.push(item.name);
        /* safe radio group name and checked value in ret_obj */
        ret_obj[item.name] = document.querySelector('input[name="' + item.name + '"]:checked').value;
      }
    } else {
      /* if question input is different from radio
         safe the name-value pair in ret_obj */
      ret_obj[item.name] = item.value;        }
    }
    console.log(JSON.stringify(ret_obj));
    download('yourFilename', JSON.stringify(ret_obj));
  }

<div>
<form id="questionsForm">

<h4>Students Name<input type="text" name="Name" value="TheStudentsName" size="50"></h4>

<h4>1. Why is it important to think about safety?</h4>
<p><label for="q1"><input type="radio" name="1.1" value="A" id="q1a" />it identifies where the risks are.</label></p>
<p><label for="q1"><input type="radio" name="1.1" value="B" id="q1b" checked/>because I may get hurt.</label></p>
<p><label for="q1"><input type="radio" name="1.1" value="C" id="q1c" />because it may prevent accidents and keep everyone safe.</label></p>
<p><label for="q1"><input type="radio" name="1.1" value="D" id="q1d"/>because it will keep others safe.</label></p>


<h4>11. Respirators should be used to prevent?</h4>
<p><input type="text" name="1.11" id="1.11" size= "120" value="answer11"></p>

<h4>12. Disposable gloves are optional but do provide a convenient way to avoid?</h4>
<p><input type="text" name="1.12" id="1.12" size= "120" value="answer12"></p>

<h4>13. Why should you prevent liquid oil and grease from entering the pores of your skin?</h4>
<p><input type="text" name="1.13" id="1.13" size= "120" value="answer13"></p>

<h4>14. Why shouldn't we use hot water to wash off grease and oil off our hands?</h4>
<p><input type="text" name="1.14" id="1.14" size= "120" value="answer14"></p>

<h4>15. List 3 things that may cause a fire or act as a fuel?</h4>
<p>a.   <input type="text" name="1.15a" id="1.15a" size= "117" value="answer15a"></p>
<p>b.   <input type="text" name="1.15b" id="1.15b" size= "117" value="answer15b"></p>
<p>c.   <input type="text" name="1.15c" id="1.15c" size= "117" value="answer15c"></p>

</form>
<button onclick="getFormData()">getFormData</button>
</div>

顺便提一下：不要使用过时的。

<script language="Javascript"></script>

你应该使用。

<script type="text/javascript"></script>

为了使文件中的文本更易读，您可以使用JSON.stringify的第三个参数。

JSON.stringify(ret_obj, null, '\t')

更新：

在上面的例子中，未回答的输入字段不会被保存。如果要求回答，可以使用属性required。

<!-- example for required attribute of input element -->
<h4>11. Respirators should be used to prevent?</h4>
<p><input type="text" name="1.11" id="1.11" size= "120" required></p>

然而，单选按钮的问题是必需的，否则脚本将抛出错误，因为在该行中需要问题。

ret_obj[item.name] = document.querySelector('input[name="' + item.name + '"]:checked').value;

"document.querySelector('input[name="' + item.name + '"]:checked') 如果单选按钮组中没有选中的按钮，则为 null，而 null 没有 value 属性。

根据 w3.org 状态：

为了避免混淆，作者鼓励在组中的所有单选按钮上指定属性，以确定单选按钮组是否需要。实际上，通常鼓励作者避免单选按钮组中没有任何初始选中控件的情况，因为这是用户无法返回的状态，因此通常被认为是一种较差的用户界面。

实际上，单选按钮组中只需要一个单选按钮具有属性 required 即可使组成为必填项。或者应该像以下示例中那样预先选择单选按钮。
"
<h4>1. Who is the owner of my socks?</h4> <p><label for="q1a"> <input type="radio" name="socksOwner" value="me" id="q1a">me </label></p> <p><label for="q1b"> <input type="radio" name="socksOwner" value="JohnDoe" id="q1b" />John Doe </label></p> <p><label for="q1c"> <input type="radio" name="socksOwner" value="NA" id="q1c" checked/>I don't know </label></p>

然而，如果您不想要单选按钮问题的答案是必须的或预先选择的，我们需要在脚本中处理。因此，我们检查是否有一个组中的项目被选中，只有在这种情况下才保存值。为了实现这一点，请更改这行代码。
ret_obj[item.name] = document.querySelector('input[name="' + item.name + '"]:checked').value;

转换为：

/* checked item in radio group*/ var selRadio = document.querySelector('input[name="' + item.name + '"]:checked'); /* if one of the radio buttons in the group is checked, safe value */ if (selRadio !== null) { ret_obj[item.name] = selRadio.value; }