document.getElementById('yourFrom').elements

并确保对象中的名称/值对安全.然后,您可以将该对象传递给下载功能.

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

getFormData()

通过单击按钮而不是提交表单来调用.

由于问题表格中有单选按钮,因此循环应检查
它仅保护所选值.我在示例代码中添加了注释
解释如何完成.

我注释掉了功能

download()

因为我认为让人们在这里下载文件不是一个好主意.
但是当您打开自己的开发工具时,您会看到文件中安全的内容
浏览器.为此,我把线

console.log(...);

为了方便起见,我还在代码段的形式中放置了一些示例值.

function download(filename,text) {
  /*var pom = document.createElement('a');
  pom.setAttribute('href',' + 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：

To avoid confusion as to whether a radio button group is required or not,authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed,in general,authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place,as this is a state that the user cannot return to,and is therefore generally considered a poor user interface.

实际上,组中只有一个单选按钮需要使组成为必需的属性.或者应该有一个预选的单选按钮,如以下示例所示.

<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;
}