Nothing like a test to know what is happening (with some corrections):
-
getElementById()
will not work if you do not use document
before
- Remove
display: none
so that you can see the form
- Instead of putting a
onsubmit=""
on the form, put a onclick=""
on the button and set it button
to not reload the page
Code:
function guardaFormulario() {
//Primeiro como você está fazendo (com as correções):
var contaCliente = new Object();
contaCliente.nome = document.getElementById('nome');
contaCliente.agencia = document.getElementById('agencia');
contaCliente.conta = document.getElementById('conta');
console.log(contaCliente.valueOf());
//Agora como eu acredito que você queira fazer:
var contaCliente = new Object();
contaCliente.nome = document.getElementById('nome').value;
contaCliente.agencia = document.getElementById('agencia').value;
contaCliente.conta = document.getElementById('conta').value;
console.log(contaCliente.valueOf());
}
<div id="formulario">
<form>
<div>
<label for="nome"> Nome: </label>
<input type="text" id="nome" />
</div>
<div>
<label for="agencia"> Agência: </label>
<input type="text" id="agencia" />
</div>
<div>
<label for="conta"> Conta: </label>
<input type="text" id="conta" />
</div>
<div class="button">
<button onclick="guardaFormulario();" type="button">Localizar conta de cliente</button>
</div>
</form>
</div>
In the first output of the console an object with html elements will appear, and in the second an object with values of the form inputs
But still this code can be simplified (as I would and with the localStorage):
<div id="formulario">
<form>
<div>
<label for="nome"> Nome: </label>
<input type="text" id="nome" />
</div>
<div>
<label for="agencia"> Agência: </label>
<input type="text" id="agencia" />
</div>
<div>
<label for="conta"> Conta: </label>
<input type="text" id="conta" />
</div>
<div class="button">
<button id="enviar" type="button">Localizar conta de cliente</button>
</div>
</form>
</div>
<script>
//Variáveis dos inputs (html, sem o .value)
var nome = document.getElementById('nome');
var agencia = document.getElementById('agencia');
var conta = document.getElementById('conta');
//Variável do objeto que será guardado
var obj;
//Adiciona um ouvinte de evento ao botão para quando o usuário clicar nele
document.getElementById('enviar').addEventListener('click', function() {
//Monta o objeto que será salvo
obj = {
nome: nome.value,
agencia: agencia.value,
conta: conta.value
};
//Mostra no console o objeto antes de ser salvo no localStorage
console.log(obj.valueOf());
//Salva o objeto no localStorage
localStorage[nome.value] = JSON.stringify(obj);
//Mostra no console o objeto salvo
console.log(JSON.parse(localStorage[nome.value]).valueOf());
});
</script>