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>