我刚刚开始,我们学生和我已经创建了一个在线工作书,但是无法获得下载到文本文件的答案,它下载但是当我们打开文件时它出现未定义这里是我的代码。
这适用于outlook,但学生没有Outlook,他们有办公室365基于Web的电子邮件,我不允许使用我们的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>
如果我理解你的问题是正确的,问题是你用未定义的参数调用下载函数。要从表单中获取数据,您可以循环访问
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')
更新
在上面的例子中,来自输入字段的未回答的问题根本没有被保护。要求答案,您可以使用所需的<input>属性。
<!-- 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;
如果未检查组的单选按钮且null没有属性值,则document.querySelector('input[name="' + item.name + '"]:checked')
为null。
正如w3.org states:
为避免混淆是否需要单选按钮组,建议作者在组中的所有单选按钮上指定属性。实际上,一般来说,鼓励作者首先避免使用没有任何初始检查控件的单选按钮组,因为这是用户无法返回的状态,因此通常被认为是不良的用户界面。
实际上,只有一个组中的单选按钮需要使组成所需的属性。或者应该有一个预先选择的单选按钮,如下例所示。
<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;
}