1

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>
        `);
  });
  // });
}

1 Resposta 1

1

Como pode cancelar a ação do submit do form com event.preventDefault() dentro do atributo onsubmit:

onsubmit="cadastrar(); event.preventDefault()"

O que está acontecendo é que o formulário está sendo submetido e a página recarregada, e com isso a lista de alunos fica vazia porque não há nenhuma ação de listar o que tem o localStorage quando a página é carregada.

5
  • Colocando o event.preventDefault() dentro do onsubmit armazena os dados no localstorage, mas eu tenho que clicar novamente no botão cadastrar para aparecer na tabela. Depois disso, nenhum comando funciona mais.. :/
    – pipo
    Commented 19/12/2019 às 15:19
  • Não entendi. Quando vc clica em "cadastrar" a tabela é atualizada.
    – Sam
    Commented 19/12/2019 às 15:22
  • Então, há um evento dentro da função listar() com o mesmo comando (preventDefault()). Daí, creio que, quando eu inseri o preventDefault() no onsubmit, esse comando foi repetido duas vezes (uma no HTML e uma por meio da função listar()). Tirei o evento da função listar() e tá funcionando certinho!!!
    – pipo
    Commented 19/12/2019 às 15:24
  • Obrigado! (Apertei o enter sem querer) quebrei a cabeça umas 4h ontem e hoje a manhã inteira, mas foi hahaha Só respondendo a sua última pergunta, @sam, eu queria que, ao clicar em cadastrar, houvesse a validação dos atributos do HTML primeiro e, se tudo estivesse direito, os dados do form fossem submetidos na tabela e armazenados no localstorage. Eu só estava conseguindo a validação e o armazenamento. Daí resolvi tirar esse evento da função listar e foi :D
    – pipo
    Commented 19/12/2019 às 15:27
  • Marquei, @Sam! Obrigadão!!
    – pipo
    Commented 19/12/2019 às 15:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .