Storing data from a form

Asked

Viewed 13,081 times

2

I would like to know how to store data from a form, there will be a presentation in the course and I would like the people who access my page to leave a comment about what they thought... I was wondering if this is possible only with Javascript, the comments could be stored in a Text document... I don’t 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

  • A basic example in php : <? php $text = $_POST['input_text']; // Opens or creates the bloco1.txt // "a" represents that the file is opened to be written $Fp = fopen("bloco1.txt", "a"); // Writes what was taken from 'input_text' in the bloco1.txt $writes = fwrite($Fp, $text); // Closes the file fclose($Fp); -> OK ?>

  • 1

    Javascript is possible, but the data would only be saved on the user’s local machine. That is, it would be useful for you only if all users register on the same machine. Otherwise each registration would be on a machine.

  • In case it would be a computer for each group... I will try to use in php dps. Thanks for the help!

  • Can you explain how you want to integrate this data? Users could send this form to a server and save it to a comic or file.

  • It would only be a place for people who access the page to interact and comment on what they found... Name, and comment only...

2 answers

2


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

Save to an html file and 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>

How to Save and Upload Text Files Using Html5 and Javascript - ENG

  • 3

    It would be nice if you included the source from which you copied this code.

  • Thanks a lot, it helped a lot!

  • @Karina, if the answer solved your problem, mark it as the accepted answer.

  • Ok! Just one more question... In case, is it possible for the Save button to have two functions? Save the file and direct to an html page?

  • of course and only put the function to redirect at the end of the function saveTextAsFile , a way to redirect would be like this window.location.href = 'index.html';.

  • I am unable to validate this form ;/ How do I display an Alert if the person has not completed the textarea and an Alert that the comment has been saved?

  • @Karina for new questions you should open a new question.

  • http://answall.com/questions/87141/validar-um-formulario

  • Good evening. It really worked, but it lacked the <script> and the </script> in the excerpt with the functions called by html. It may be obvious to the most experts, but as I’m starting out, the code initially didn’t work, but I found out later. But thank you very much. The example helped me a lot. Thanks.

  • Now I understand why. The special characters do not appear here. I was referring to the " script" and "script bar" at the beginning and end of the functions.

Show 5 more comments

-2

Hello, From what I saw, it would be easier by PHP, saving in a database.

The code would be more or less the following:

<?php
include_once('conexao.php');
if(isset($_POST['comentar'])) {
    $sql_code = "INSERT INTO nome_da_tabela (nome, comentario) SET ('$_POST[nome]', '$_POST[comentario]')"; //Aqui seria o código SQL inserindo um registro no banco de dados
    $sql_query = mysqli_query($conn, $sql_code);
}
$sql_code1 = "SELECT * FROM nome_da_tabela"; //Aqui tem mais um código SQL, porém aqui é para ter todos os comentários registrados na tabela.
$sql_query1 = mysqli_query($conn, $sql_code1);
$row = $sql_query1->fetch_assoc();
echo '<table><thead><tr><th>Nome</th><th>Comentário</th></tr></thead><tbody>';
do {
    echo '<tr><td>'.$row['nome'].'</td><tr>'.$row['comentario'].'</tr></tr>'
}while($row = $sql_query->fetch_assoc())
echo '</tbody></table>'
?>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.