2
I created a form, but now I would like to save the data in a file to later recover them, I found this question: Storing data from a form, that helped me a little, but when implementing more variables in the script the same does not run, I wonder if anyone could do something similar.
Follow the code:
<!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>
Hello Vinicius, put the whole code mainly javascript that is where the errors are, so we can help
– picossi
You need to specify better where you want to store this data. If you are going to use only javascript, the only thing you can do is to store in the user’s machine with cookie and you will not have access. Prefer not to save in a file, but in a database. Learn php and mysql or another server and database language. By the way you need to put your form between form tags. Tb needs to have set an action to where the data will be sent and a Submit button.
– Antonio Alexandre
Good afternoon, you guys! So I updated the code, and I specified how you asked me to do it, as a matter of saving I don’t need to do it in a database, the Brazilian bank does this procedure I want to perform, I looked at their code but I didn’t understand it very well! The following is their link: http://www45.bb.com.br/fmc/frm/fw0701413_1.jsp?_ga=1.206121811.1329961390.1483366200
– Vinicius Lima