Блог

Я только начал, и мы со студентом создали онлайн-рабочую тетрадь, но не можем получить ответы для загрузки в текстовый файл, он загружается, но когда мы открываем файл, он выдает undefined вот мой код.

Это работает с Outlook, но у студентов нет Outlook, у них есть электронная почта 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>
  

Если я правильно понял ваш вопрос, проблема в том, что вы вызываете функцию загрузки с неопределенными аргументами. Чтобы получить данные из вашей формы, вы можете выполнить цикл

 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;
  

document.querySelector('input[name="' item.name '"]:checked') имеет значение null, если ни один переключатель группы не установлен и null не имеет значения свойства.

Как 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;
}