代码之家 › 专栏 › 技术社区 › Ale

使用Javascript创建.txt

getelementsbytagname forms input javascript

Ale · 技术社区 · 9 年前

我正在尝试创建一个 .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 =	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>

3 回复 | 直到 9 年前

Adam Azad 9 年前

使用 document.querySelectorAll 因为您指定了 input 你想循环。 getElementsByTagName() 返回包括submit按钮在内的所有输入,它返回一个数组,因此您需要遍历它。

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>

paxx 9 年前

这个 document.getElementsByTagName 将返回所有输入的列表,包括单选按钮和提交按钮。因此,您应该遍历它们,或者从数组中选择一个元素。

bentrm 9 年前

document.querySelector 返回选中的第一个元素,如果没有,则返回null(单数)。只要找到一个元素,就可以访问它的value属性。

document.getElementsByTyName 返回具有提供的标记名(复数)的元素数组。数组没有属性值,因此返回值将为 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())