Store data in a form

Question

Store data in a form

Navigation

#1 by (2 votes)

2

I would like to know how to store data in a form, it will have a presentation in the course and I would like people who access my page to leave a comment about what they found ... I wondered if this is possible only with JavaScript, the comments could be stored in a Text document ... I do not know how this works. My HTML structure

<html>
    <style type="text/css"> 
    body{ 
        background: white;
        url("comentario/fundocomentario.jpg") top left repeat-x fixed; 
    }
    </style>

    <img src="comentario/deixeseucomentario.png" width=500 height=100>
    <font size=5 color="black" face="Broadway">

    <font size=4 color="#8B0000" face="Broadway">
    <form name="cadastro">
        <img src="comentario/comentarionome.png" width=50 height=25>

        <input type="text" name="nome" id="nome" maxlength=30 size=50 style="background-color:#98F5FF;color:#8B0000;font-size:15px">
        <br>
        <img src="comentario/comentarioemail.png" width=50 height=25>

        <input type="text" name="email" id="email" maxlength=30 size=49 style="background-color:#98F5FF;color:#8B0000;font-size:15px">
        <br>
        </font>
        <font size=4 color="black" face="Broadway"><br>

        <img src="comentario/achou.png" width=350 height=40>
        <br>

        <textarea id="comentario" name="comentario" cols=62 rows=5 style="background-color:#98F5FF;color:#8B0000;font-size:15px">
        </textarea>

        <input type="button" value="salvar" src="salvar" onclick="salvar()">

        <iframe id="conteudo" style="display: none"></iframe>

    </form>

<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="comentario/comentariocentro.png" width=400 height=40>

</html>

javascript html

asked by anonymous 14.09.2015 / 18:28

1 answer

Execute a function at a given time Consuming Json with AngularJS

score 2 · Accepted Answer

Here is a complete example of how you can save the files in txt and then read them.

Save to an html file and take the test.

function saveTextAsFile() {
  var textToWrite = document.getElementById("inputTextToSave").value;
  var textFileAsBlob = new Blob([textToWrite], {
    type: 'text/plain'
  });
  var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.webkitURL != null) {
    // Chrome allows the link to be clicked
    // without actually adding it to the DOM.
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
  } else {
    // Firefox requires the link to be added to the DOM
    // before it can be clicked.
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    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");
}

<html>

<body>

  <table>
    <tr>
      <td>Text to Save:</td>
    </tr>
    <tr>
      <td colspan="3">
        <textarea id="inputTextToSave" style="width:512px;height:256px"></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>


</body>

</html>

Saving and loading text files using html5 and javascript - ENG