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

Question

The code below works perfectly to download a text box.下面的代码非常适合下载文本框。 However, I wish to expand upon it to add three boxes and a radio button.但是，我希望扩展它以添加三个框和一个单选按钮。 I'd then like to be able to download the .txt containing all the data.然后，我希望能够下载包含所有数据的 .txt。 For example, FirstName, Surname, Email, Male/Female(radio button).例如，名字、姓氏、电子邮件、男/女（单选按钮）。 I can't seem to find a way of doing this.我似乎找不到这样做的方法。 Any help hugely appreciated!非常感谢任何帮助！

 <!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>

Answer 1

You can get the values with getElementById if you set id's on each element as the pattern I'll did.如果您将每个元素的 id 设置为我将做的模式，则可以使用 getElementById 获取值。 Join them together with a line brake.用线制动器将它们连接在一起。

 <!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>

Answer 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>

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

问题描述

2 个解决方案

解决方案1
1 2018-02-27 09:54:02

解决方案2
1 2018-02-27 10:04:08

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

问题描述

2 个解决方案

解决方案1 1 2018-02-27 09:54:02

解决方案2 1 2018-02-27 10:04:08

解决方案1
1 2018-02-27 09:54:02

解决方案2
1 2018-02-27 10:04:08