Store data from a multi-input form in some file type and then reload it on the same form?

1

I created a form, but now I would like to save the data to a file and then retrieve it, I found this question: #

Follow the code below:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Formulario </title>
    <script>
   function saveTextAsFile() {
  var textToWrite = document.getElementById('nome').value; 
  //var textToWrite2 = document.getElementById('dateabertura').value;
 //var textToWrite3 = document.getElementById('cnpjcpf').value;
 var textFileAsBlob = new Blob([textToWrite], {
  type: 'text/plain', type:'date'

});
 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";
    downloadLink.style.display = "dateabertura";
    downloadLink.style.display = "cnpjcpf";
   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("nome").value = textFromFileLoaded;
  document.getElementById("dateabertura").value = textFromFileLoaded;
} ;
  fileReader.readAsText(fileToLoad, "UTF-8");   
}

 </script>
 </head>
 <body>
  <form action="gravar.php" method="post" >
                    <div class="container">
         <div class="dateinfo">
            <table>
                <tr>
                    <th>Data de Abertura<input type="date" id="dateabertura" placeholder="00/00/0000"  pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])/(0[1-9]|1[012])/[0-9]{4}"></th>
                </tr>
                   <tr>
                    <th>Data de Finalização<input type="date" placeholder="00/00/0000"  pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])/(0[1-9]|1[012])/[0-9]{4}"></th>
                </tr>
             </table>

             </div>
          <div class="defup">
               <input type="radio" class="def" name="gender1" value="defeito"> Defeito
               <input type="radio" class="upgr" name="gender1" value="upgrade"> Upgrade
            </div>
            </div>
                        <div class="dadoscliente">
            <table class="tabcliente">
            <h1 class="titulofor">Dados do Cliente</h1>
            <tr>
                <th class="nome">Nome Completo:<input type="text" id="nome"></th> 
                <th class="cpfcnpj">CPF/CNPJ:<input type="text" id="cnpjcpf"></th>
            </tr>
            <tr>
                <th class="emailcli">Email:<input type="email" placeholder="[email protected]" ></th> 
                <th class="telcli">Telefone:<input type="tel" placeholder="11-3333-3333"  maxlength="12" name="phone" pattern="\([0-9]{2}) [0-9]{4,6}-[0-9]{3,4}$"/></th>
                <th class="telcli">Celular:<input type="tel" placeholder="11-99999-9999"  maxlength="15" name="phone" pattern="\([0-9]{2}) [0-9]{4,6}-[0-9]{3,4}$"/></th>
            </tr>
            <tr>
                 <th class="cep">Cep:<input placeholder="#####-###" name="cep" type="text" id="cep" value="" size="10" maxlength="9" onblur="pesquisacep(this.value);" /></th>
                <th class="rua">Rua:<input name="rua" type="text" id="rua" size="60" /></th>
                <th class="numero">Numero: <input type="number"></th>
            </tr>
            <tr>
               <th class="bairro">Bairro:<input name="bairro" type="text" class="inbairro" id="bairro" size="40" /></th>
                <th class="cidade">Cidade:<input name="cidade" class="inpcidade" type="text" id="cidade" size="40" /></th>
                <th class="UF">Estado:<input name="uf" class="inpUF" type="text" id="uf" size="2" /></th>
            </tr>
            </table>  

</div>
                           <table>
    <tr>
      <td>Digite um nome para salvar:</td>
      <td>
        <input id="inputFileNameToSaveAs"></input>
      </td>
      <td>
        <button onclick="saveTextAsFile()">Salve o arquivo de texto</button>
      </td>
    </tr>
    <tr>
      <td>Selecione um arquivo para carregar:</td>
      <td>
        <input type="file" id="fileToLoad">
      </td>
      <td>
        <button onclick="loadFileAsText()">carregue o arquivo selecionado</button>
        <td>

         </table>

     </form>                               

    
asked by anonymous 05.01.2017 / 01:48

0 answers