Puis-je enregistrer l'entrée du formulaire à .txt en HTML, en utilisant JAVASCRIPT / jQuery, puis l'utiliser?

Est-il possible d'enregistrer textinput (localement) d'un formulaire à un fichier texte, puis d'ouvrir ce document pour l'utiliser plus tard?

En utilisant simplement HTML, javascript et jQuery. Pas de bases de données ou php.

/ W

Il est possible de sauvegarder uniquement si l'utilisateur le permet d'être enregistré comme un téléchargement et il doit l'ouvrir manuellement, le seul problème est de suggérer un nom, mon exemple de code suggère un nom uniquement pour Google Chome et seulement si vous utilisez un Lien au lieu du bouton en raison de l'attribut de download .

Vous n'aurez besoin que d'une bibliothèque encoder base64 et de JQuery pour des choses simples.

 <!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> <script type="text/javascript"> <!-- // 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)); }); }); //--> </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> 

D'après ce que je comprends, vous devez enregistrer les entrées d'un utilisateur localement dans un fichier texte.

Vérifiez ce lien. Voyez si cela vous aide.

Enregistrement de l'entrée utilisateur dans un fichier texte localement

Vous pouvez utiliser localStorage pour enregistrer les données pour une utilisation ultérieure, mais vous ne pouvez pas enregistrer dans un fichier en utilisant JavaScript (dans le navigateur).

Pour être complet: vous ne pouvez pas stocker quelque chose dans un fichier en utilisant JavaScript dans le navigateur, mais en utilisant HTML5 , vous pouvez lire des fichiers.

La réponse est OUI

 <html> <head> </head> <body> <script language="javascript"> function WriteToFile() { var fso = new ActiveXObject("Scripting.FileSystemObject"); var s = fso.CreateTextFile("C:\\NewFile.txt", true); var text=document.getElementById("TextArea1").innerText; s.WriteLine(text); s.WriteLine('***********************'); s.Close(); } </script> <form name="abc"> <textarea name="text">FIFA</textarea> <button onclick="WriteToFile()">Click to save</Button> </form> </body> </html> 

Vous ne pouvez pas l'enregistrer en tant que fichier local sans utiliser la logique côté serveur. Mais si cela correspond à vos besoins, vous pouvez regarder le stockage local de html5 ou nous un plugin javascript en tant que jStorage

Ou cela fonctionnera aussi de la même manière, mais sans sauvegarder le choix:

 <!DOCTYPE html> <html> <head> <script type='text/javascript'>//<![CDATA[ window.onload=function(){ (function () { var textFile = null, makeTextFile = function (text) { var data = new Blob([text], {type: 'text/plain'}); // If we are replacing a previously generated file we need to // manually revoke the object URL to avoid memory leaks. if (textFile !== null) { window.URL.revokeObjectURL(textFile); } textFile = window.URL.createObjectURL(data); return textFile; }; var create = document.getElementById('create'), textbox = document.getElementById('textbox'); create.addEventListener('click', function () { var link = document.getElementById('downloadlink'); link.href = makeTextFile(textbox.value); link.style.display = 'block'; }, false); })(); }//]]> </script> </head> <body> <textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a> <script> // tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "qm5AG" }], "*") } </script> </body> </html> 

Cela fonctionnera à la fois pour charger et enregistrer un fichier dans TXT à partir d'une page HTML avec une sauvegarde en tant que choix

 <html> <body> <table> <tr><td>Text to Save:</td></tr> <tr> <td colspan="3"> <textarea id="inputTextToSave" cols="80" rows="25"></textarea> </td> </tr> <tr> <td>Filename to Save As:</td> <td><input id="inputFileNameToSaveAs"></input></td> <td><button onclick="saveTextAsFile()">Save Text to File</button></td> </tr> <tr> <td>Select a File to Load:</td> <td><input type="file" id="fileToLoad"></td> <td><button onclick="loadFileAsText()">Load Selected File</button><td> </tr> </table> <script type="text/javascript"> function saveTextAsFile() { var textToSave = document.getElementById("inputTextToSave").value; var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"}); var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; downloadLink.href = textToSaveAsURL; downloadLink.onclick = destroyClickedElement; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); downloadLink.click(); } function destroyClickedElement(event) { document.body.removeChild(event.target); } function loadFileAsText() { var fileToLoad = document.getElementById("fileToLoad").files[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var textFromFileLoaded = fileLoadedEvent.target.result; document.getElementById("inputTextToSave").value = textFromFileLoaded; }; fileReader.readAsText(fileToLoad, "UTF-8"); } </script> </body> </html> 

La meilleure solution si vous me le demandez est ceci. Cela sauvegardera le fichier avec le nom de fichier de votre choix et automatiquement en HTML ou en TXT à votre choix avec des boutons.

Exemple:

 <html> <head> <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); } function addTextHTML() { document.addtext.name.value = document.addtext.name.value + ".html" } function addTextTXT() { document.addtext.name.value = document.addtext.name.value + ".txt" } </script> </head> <body> <form name="addtext" onsubmit="download(this['name'].value, this['text'].value)"> <textarea rows="10" cols="70" name="text" placeholder="Type your text here:"></textarea> <br> <input type="text" name="name" value="" placeholder="File Name"> <input type="submit" onClick="addTextHTML();" value="Save As HTML"> <input type="submit" onClick="addTexttxt();" value="Save As TXT"> </form> </body> </html>