web-dev-qa-db-fra.com

Puis-je sauvegarder des entrées de formulaire en HTML, en utilisant JAVASCRIPT/jQuery, puis les utiliser?

Est-il possible de sauvegarder une entrée de texte (localement) d'un formulaire dans un fichier texte, puis d'ouvrir ce document pour l'utiliser ultérieurement?

Juste en utilisant HTML, javascript et jQuery. Aucune base de données ou php.

/ W

javascriptjqueryhtml5css3xhtml
8
XT_Nova

Il est possible de sauvegarder uniquement si l'utilisateur autorise cette sauvegarde, comme un téléchargement, et 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 uniquement si vous utilisez un fichier. lien au lieu de bouton en raison de l'attribut download.

Vous aurez seulement besoin d'une bibliothèque de code base64 et de JQuery pour faciliter les choses.

<!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>
13
José Roberto Araújo Júnior

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

Vérifiez ce lien. Voir si cela aide.

Enregistrement local des entrées utilisateur dans un fichier texte

2
sugavaneshb

Vous pouvez utiliser localStorage pour enregistrer les données en vue d'une utilisation ultérieure, mais vous ne pouvez pas enregistrer dans un fichier file à l'aide de 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.

1
davidpfahler

Ou cela fonctionnera aussi de la même manière mais sans sauvegarde en tant que 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>
0
SeekLoad

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 comme jStorage

0
A. Wolff

MEILLEURE solution si vous me demandez est la suivante. .__ Ceci enregistre le fichier avec le nom de fichier de votre choix et automatiquement en HTML ou dans 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>
0
SeekLoad

Cela fonctionnera à la fois pour charger et sauvegarder un fichier dans TXT à partir d'une page HTML avec un choix de sauvegarde.

<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>
0
SeekLoad