Создание .txt с помощью Javascript

Question

Я пытаюсь создать .txt с помощью JavaScript это работает:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
$("form").each(function() { 
 
       $(this) 
 
}) 
 

 
    var textarea = document.querySelector('textarea'); // document.querySelector => Get the first element in the document with tag textarea 
 
    var anchor = document.querySelector('a'); 
 

 
    anchor.onclick = function() { 
 
       anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(textarea.value); 
 
       anchor.download = 'export.txt'; 
 
    }; 
 
</script> 
 
     <h2>PHP Form Validation Example</h2> 
 
     <form> 
 

 
      Name: <input type="text" name="name"> 
 
      <br><br> 
 
      E-mail: <input type="text" name="email"> 
 
      <br><br> 
 
      Web: <input type="text" name="website"> 
 
      <br><br> 
 
      Kom: <textarea name="comment" rows="5" cols="40"></textarea> 
 
      <br><br> 
 
      G: 
 
      <input type="radio" name="gender" value="w">w 
 
      <input type="radio" name="gender" value="m">m 
 
      <br><br> 
 
      <input type="submit" name="submit" value="Submit"> 
 
      <textarea></textarea> 
 
      <p><a href="#">Export</a></p> 
 
</form>

браузер загружает файл .txt с данным пользователем помещается в поле.

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

var input = \t document.getElementsByTagName("input"); 
 
var anchor = document.querySelector('a'); 
 
      
 
anchor.onclick = function() { 
 
     anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(input.value); 
 
     anchor.download = 'export.txt'; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<h2>PHP Form Validation Example</h2> 
 
<form> 
 
    Name: <input type="text" name="name"> 
 
    <br><br> 
 
    E-mail: <input type="text" name="email"> 
 
    <br><br> 
 
    Web: <input type="text" name="website"> 
 
    <br><br> 
 
    Kom: <textarea name="comment" rows="5" cols="40"></textarea> 
 
    <br><br> 
 
    G: 
 
    <input type="radio" name="gender" value="w">w 
 
    <input type="radio" name="gender" value="m">m 
 
    <br><br> 
 
    <input type="submit" name="submit" value="Submit"> 
 
    <textarea></textarea> 
 
    <p><a href="#">Export</a></p> 
 
</form>

Answer 1

Используйте document.querySelectorAll, потому что вы укажете, какой тип input вы хотите перевернуть. getElementsByTagName() возвращает все входы, включая кнопку отправки, и возвращает массив, поэтому вам нужно зациклиться на нем.

var inputs = $("input[type=text], textarea"); 
 
var anchor = document.querySelector('a'); 
 

 
anchor.onclick = function() { 
 

 
     var content = ''; 
 
     inputs.each(function(){ 
 
     content += ' '+ $(this).val(); 
 
     }); 
 
    
 
     anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content); 
 
     anchor.download = 'export.txt'; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<h2>PHP Form Validation Example</h2> 
 
<form> 
 
    Name: <input type="text" name="name"> 
 
    <br><br> 
 
    E-mail: <input type="text" name="email"> 
 
    <br><br> 
 
    Web: <input type="text" name="website"> 
 
    <br><br> 
 
    Kom: <textarea name="comment" rows="5" cols="40"></textarea> 
 
    <br><br> 
 
    G: 
 
    <input type="radio" name="gender" value="w">w 
 
    <input type="radio" name="gender" value="m">m 
 
    <br><br> 
 
    <input type="submit" name="submit" value="Submit"> 
 
    <textarea></textarea> 
 
    <p><a href="#">Export</a></p> 
 
</form>

Answer 2

document.querySelector возвращает самый первый элемент, который выбран или нуль, если нет (в единственном числе). Пока элемент обнаружен, доступ к его значению свойства работает.

document.getElementsByTyName возвращает массив элементов с предоставленным именем тега (множественное число). Массив не имеет значения свойства, поэтому возвращаемое значение будет undefined. В свою очередь, ваш текстовый файл должен содержать что-то вроде «undefined».

Чтобы выбрать все текстовые входы и сцепить их значения вы можете использовать что-то вроде:

var textInputs = document.querySelectorAll("input[type=text], textarea"); 
var values = []; 
for (var i = 0; i < textInputs.length; i++) { 
    values.push(textInputs[0].value) 
} 
console.log(values.toString()) 

Answer 3

document.getElementsByTagName возвращает список всех входов, включая те радиокнопки и кнопку отправки. Поэтому вы должны либо перебирать их, либо выбирать один элемент из массива.