Olá, pessoal! Eu estou fazendo uma aplicação em Javascript e API JQuery, utilizando o localstorage para armazenar os dados. Inseri alguns atributos de validação nos inputs (required e pattern) e inseri o evento onclick na tag button para submeter os dados na tabela.
Descobri que os atributos de validação não são ativados, pois o evento onclick é ativado primeiro. Assim, pesquisei e segui algumas orientações de colocar o evento onsubmit na tag form, para ser validado primeiro e, depois, os dados serem submetidos e jogados na tabela e no localstorage.
O problema é que os dados são validados, submetidos, armazenados no localstorage, porém não populam a tabela.
Já tentei alterar a tag button para input e inserir o type “submit”, inserir o onsubmit no form com o onclick no button/input, e nada.
Daí parti para o JQuery e tentei fazer uma função à parte chamando a função de cadastrar, por meio de evento, de if, e nada funciona. O máximo que acontece é o caso acima (respeitar as validações e armazenar o conteúdo no localstorage, mas não popula a tabela), sendo que eu preciso que a tabela contenha os dados, também.
Se alguém puder me ajudar, eu agradeço!
Segue o código abaixo:
HTML
<section id="form">"
<form id="form-aluno" onsubmit="cadastrar()">
<!-- <form id="form-aluno">-->
<h2>Dados do aluno</h2>
<p>Página destinada ao cadastro, edição, remoção e exibição dos alunos matriculados no Colégio Fiorentin. </p>
<label for="aluno">Nome:</label>
<input type="text" id="aluno" name="nome" class="valida-form" required="required" />
<label for="idade">Idade:</label>
<input type="text" required="required" id="idade" class="valida-form" name="numbers" pattern="[0-9]+$" />
<label for="serie">Série:</label>
<select id="serie" name="serie" class="valida-form" required="required">
<option value="" data-default disabled selected>Selecione</option>
<option value="1º ano - ensino médio">1º ano - ensino médio</option>
<option value="2º ano - ensino médio">2º ano - ensino médio</option>
<option value="3º ano - ensino médio">3º ano - ensino médio</option>
</select>
<label for="faltas">Faltas:</label>
<input type="number" id="faltas" class="valida-form" name="faltas" required="required" />
<input type="hidden" id="txtId" class="valida-form" name="id" required="required">
<!-- <button type="submit" id="cadastro" onclick="cadastrar()">Cadastrar</button>-->
<!-- <button type="button" id="cadastro">Cadastrar</button>-->
<input type="submit" id="cadastro" value="Cadastrar" />
<button style="display:none" type="button" id="alterar" onclick="modificar()">Modificar</button>
</form>
</section>
<div>
<table id="tabela">
<thead>
<tr>
<th>Aluno</th>
<th>Idade</th>
<th>Série</th>
<th>Faltas</th>
<th>Situação</th>
</tr>
</thead>
<tbody id="tbody-alunos">
</tbody>
</table>
</div>
JS
let botaoAdiciona = $("#cadastro");
let formAluno = $("#form-aluno");
function cadastrar() {
let alunos = localStorage.alunos == null ? [] : JSON.parse(localStorage.alunos);
let nome = $("#aluno").val();
let idade = $("#idade").val();
let serie = $("#serie").val();
let faltas = $("#faltas").val();
alunos.push({
aluno: nome,
idade: idade,
serie: serie,
faltas: faltas,
situacao: faltas > 50 ? "Reprovado por faltas" : "Aprovado"
});
localStorage.alunos = JSON.stringify(alunos);
listar();
alert(`Dados do(a) aluno(a) ${nome} adicionados!`);
formAluno[0].reset();
}
function listar() {
// document.addEventListener("click", function (e) {
// e.preventDefault();
let alunos = localStorage.alunos == null ? [] : JSON.parse(localStorage.alunos);
let tabela = $("#tbody-alunos");
tabela.html("");
alunos.forEach(dados => {
tabela.append(`
<tr>
<td>${dados.aluno}</td>
<td>${dados.idade}</td>
<td>${dados.serie}</td>
<td>${dados.faltas}</td>
<td>${dados.situacao}</td>
<td>
<button id="botao-editar" onclick="editar(${dados.nome})">Editar</button>
<button id="botao-apagar" onclick="excluir(${dados.nome})">Excluir</button>
</td>
</tr>
`);
});
// });
}