我可以使用 javascript 将 HTML 表单数据（包括单选按钮）保存为本地 txt 文件吗？答案

【问题标题】：Can I save a HTML form data (including radio button) as a local txt file using javascript?我可以使用 javascript 将 HTML 表单数据（包括单选按钮）保存为本地 txt 文件吗？
【发布时间】：2018-08-06 21:34:50
【问题描述】：

下面的代码非常适合下载文本框。但是，我希望扩展它以添加三个框和一个单选按钮。然后，我希望能够下载包含所有数据的 .txt。例如，名字、姓氏、电子邮件、男/女（单选按钮）。我似乎找不到这样做的方法。非常感谢任何帮助！

<!DOCTYPE html>
<html>
<head>
<style>
form * {
  display: block;
  margin: 10px;
}
</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>
</head>
<body>

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea rows=3 cols=50 name="text">Please type in this box. When you 

click the Download button, the contents of this box will be downloaded to 

your machine at the location you specify. Pretty nifty. </textarea>
  <input type="submit" value="Download">
</form>
</body>

【问题讨论】：

您可以在文本中添加单选按钮数据数据，然后再将其传递给您的 download() 函数。
您需要做的就是从 DOM 中获取所有数据。将其添加在一起然后格式化..然后将其传递给您的下载功能。

标签： javascript html forms text radio

【解决方案1】：

如果您在每个元素上设置 id，就像我将做的那样，您可以使用 getElementById 获取值。用线闸将它们连接在一起。

<!DOCTYPE html>
<html>
<head>
<style>
form * {
  display: block;
  margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename) {
  var inputArray = [];
  inputArray[0]='Firstname: '+document.getElementById('firstName').value;
  inputArray[1]='Lastname: '+document.getElementById('lastName').value;
  inputArray[2]='Text 1: '+document.getElementById('text1').value;
  inputArray[3]='Text 2: '+document.getElementById('text2').value;
  
  var text = inputArray.join('\n');
  
  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>
</head>
<body>

<form onsubmit="download(this['name'].value)">
  <input type="text" name="name" value="test.txt">
  <input type="text" id="firstName" placeholder="Firstname">
  <input type="text" id="lastName" placeholder="Lastname">
  <textarea rows=3 cols=50 id="text1"> First </textarea>
<textarea rows=3 cols=50 id="text2"> Second </textarea>
  <input type="submit" value="Download">
</form>
</body>

【讨论】：

【解决方案2】：

I think it is better to generate output content as JSON. That make data more readable.

<!DOCTYPE html>
<html>

<head>
    <style>
        form * {
            display: block;
            margin: 10px;
        }
    </style>
    <script language="Javascript">
        function download() {
            var text = document.getElementsByName('text')[0].value;
            var gender = document.getElementsByName('gender')[0].value;
            var email = document.getElementsByName('email')[0].value;
            var fileName = document.getElementsByName('name')[0].value;
            var obj = {
                text: text,
                gender: gender,
                email: email
            };
            var pom = document.createElement('a');
            pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(obj)));
            pom.setAttribute('download', fileName);
            pom.style.display = 'none';
            document.body.appendChild(pom);
            pom.click();
            document.body.removeChild(pom);
            return false;
        }
    </script>
</head>

<body>

    <form onsubmit="return download()">
        <input type="text" name="name" value="test.txt">
        <textarea rows=3 cols=50 name="text">Please type in this box. When you 

click the Download button, the contents of this box will be downloaded to 

your machine at the location you specify. Pretty nifty. </textarea>
            <input type="text" name="email" id="email">
            <input type="radio" name="gender" id="gender" value="male"> Male
            <input type="radio" name="gender" id="gender" value="female"> Female
        <input type="submit" value="Download">
    </form>
</body>

【讨论】：

谢谢，这很有帮助！