javascript - 我可以使用 JAVASCRIPT/jQuery 将表单中的输入保存到 HTML 中的 .txt,然后使用它吗?

标签 javascript jquery html css xhtml

是否可以将文本输入(本地)从表单保存到文本文件,然后打开该文档以便稍后使用?

只需使用 HTML、javascript 和 jQuery。没有数据库或 php。

/W

最佳答案

只有当用户允许它像下载一样保存并且他必须手动打开它时才有可能保存,唯一的问题是建议一个名称,我的示例代码只会为 Google Chome 建议一个名称,并且仅当由于 download 属性,您使用链接而不是按钮。

您只需要一个 base64 encode library和 JQuery 来做简单的事情。

// This will generate the text file content based on the form data
function buildData(){
  var txtData = "Name: "+$("#nameField").val()+
      "\r\nLast Name: "+$("#lastNameField").val()+
      "\r\nGender: "+($("#genderMale").is(":checked")?"Male":"Female");

  return txtData;
}
// This will be executed when the document is ready
$(function(){
  // This will act when the submit BUTTON is clicked
  $("#formToSave").submit(function(event){
    event.preventDefault();
    var txtData = buildData();
    window.location.href="data:application/octet-stream;base64,"+Base64.encode(txtData);
  });

  // This will act when the submit LINK is clicked
  $("#submitLink").click(function(event){
    var txtData = buildData();
    $(this).attr('download','sugguestedName.txt')
      .attr('href',"data:application/octet-stream;base64,"+Base64.encode(txtData));
  });
});
<!DOCTYPE html>
<html>
    <head><title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="base64.js"></script>
    </head>
    <body>
    <form method="post" action="" id="formToSave">
        <dl>
            <dt>Name:</dt>
            <dd><input type="text" id="nameField" value="Sample" /></dd>
            <dt>Last Name:</dt>
            <dd><input type="text" id="lastNameField" value="Last Name" /></dd>
            <dt>Gender:</dt>
            <dd><input type="radio" checked="checked" name="gender" value="M" id="genderMale" />
                Male
                <input type="radio" checked="checked" name="gender" value="F" />
                Female
        </dl>
        <p><a href="javascript://Save as TXT" id="submitLink">Save as TXT</a></p>
        <p><button type="submit"><img src="http://www.suttonrunners.org/images/save_icon.gif" alt=""/> Save as TXT</button></p>
    </form>
    </body>
</html>

关于javascript - 我可以使用 JAVASCRIPT/jQuery 将表单中的输入保存到 HTML 中的 .txt,然后使用它吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13685263/

相关文章:

html - 我可以将 CSS 应用于 <div> 的背景图像吗?

javascript - jQuery 代码在 Chrome 中有效但在 IE 中无效

Windows 应用程序中的 Javascript/jquery

javascript - 删除不在 JavaScript 中返回的键码

javascript - jQuery .toggle 堆叠样式

javascript - 垂直边框左侧的间距

php - Codeigniter 防止重复数据

javascript - 将新的内部对象插入到可观察对象数组中并更新 DOM

javascript - 等待 get 请求完成

html - 均匀分布 li 元素,具有绝对宽度