preciso de ajuda Cadastrar dados em uma table em html sem que a pagina recarregue

26 de maio de 2020 4 respostas Resolvido

Leonardo_Klen 26 de maio de 2020

Galera, estou desenvolvendo um sistema que será meu TCC da facul. Estou fazendo um sistema para salões de beleza, enfim, estou sofrendo com um cadastro e preciso muito de ajuda.

A imagem acima seria a segunda parte do meu cadastro de serviço, que no caso é a interface de uma tabela muitos para muitos entre serviço e produto.

O que acontece: já tenho cadastrado os produtos no banco, e acabei de cadastrar o serviço em uma tela anterior a essa. Agora eu preciso incluir nessa tabela muitos para muitos todos os produtos que irei utilizar no serviço que acabei de registrar. A tela já está funcionando, porém só da para cadastrar de 1 por 1, eu gostaria de incluir todos os produtos que quero e ir aparecendo na table do html abaixo e no fim fazer um botão submit em um form e cadastrar tudo de uma só vez no banco. Eu vi que é possível fazer isso da table do html utilizando AJAX, tentei de todas as formas mas não consegui entender. Gostaria que alguém se possível pudesse me auxiliar via video chamada ou algo assim, pois estou com dificuldades e quero muito aprender isso. Caso a explicação fique confusa posso estar re-explicando novamente. Obrigado!

4 Respostas

TerraSkilll 28 de mai. de 2020

Adicionar os elementos no table e enviá-los para o servidor (via ajax ou não) são ações distintas, então, se você já não fez, seria bom fazer essa separação.

Seu botão “Adicionar” já executa a ação de criar um elemento no table? Se sim, o que ocorre se for clicado novamente? Pois, em teoria, bastaria executar a mesma ação cada vez que é clicado.

Para o envio ao servidor, você pode ter um js servindo de model/dao para armazenar os elementos, adicionando-os em uma lista, e ter um botão “Salvar” que faz o envio para o servidor. Uma alternativa mais rústica é pegar os dados direto do table, percorrendo os elementos tr para pegar os dados (via javascript).

Abraço.

Leonardo_Klen 29 de mai. de 2020

Olá TerraSkill, obrigado por comentar em meu post. Entendo que são ações distintas e até o momento não consegui fazer nenhuma delas. Meu botão adicionar ainda não está executando nenhuma funcionalidade, e é justamente isso que você escreveu que estou tendo dificuldades em desenvolver: fazer com que os produtos selecionados no combobox e a quantidade informada pelo usuário seja adicionado a table ao clicar no botão adicionar. A parte de enviar ao servidor nem cheguei a pensar ainda, mas sim precisarei fazer. Enfim, consegue me direcionar algo para estudar e resolver este primeiro problema de adicionar as informações na table? Obrigado novamente ;D

Solucao aceita

TerraSkilll 29 de mai. de 2020

Está usando alguma biblioteca (como jQuery) ou javascript puro?

Você precisa ter um evento de clique no botão “Adicionar”. Como fazer isso, depende da resposta acima.

Nesse evento, você executaria o código para criar um elemento e adicioná-lo ao table. Melhor ainda se você criar uma função independente, que pode chamar a partir do clique ou a partir de outros códigos, ganhando mais flexibilidade.

O valor da lista/combo de produto e do campo de quantidade também podem ser capturados via js e usados na criação.

Um exemplo bem simples (com jQuery) seria algo como:

html:

<div>
  <button action="adicionar">Adicionar</button>
</div>
<table id="tabela">
</table>

javascript:

var lista_itens = [];
    var tabela = $("#tabela");
    var botao_adicionar = $('button[action="adicionar"]');

botao_adicionar.on("click", function() {
  adicionarProduto();
});

function adicionarProduto() {
  let item = $('<tr>' +
  	'<td>' + "descricao do produto que vem do campo" + '</td>' +
    '<td>' + "valor do campo quantidade" + '</td>' +
    '</tr>'
  );
  
 lista_itens.push(
 {produto: "descricao do produto que vem do campo", quantidade: "valor do campo quantidade"}
 );

  tabela.append(item);
}

No botão de “Salvar”, você adiciona um evento também e faz o envio ao servidor usando ajax por exemplo, enviando como parâmetro a variável lista_itens, o que vai gerar um json que você pode receber e tratar no servidor.

Pesquise sobre como adicionar eventos à elementos javascript, como criar e adicionar elementos e como pegar o valor de campos (input, select). Para o envio, há muitos tutoriais de ajax por aí, então traga uma dúvida mais específica.

Abraço.

Leonardo_Klen 5 de jun. de 2020

TerraSkilll, deixo a você o meu muito obrigado! Você conseguiu resolver meu problema. Sou um “recém nascido” no mundo da programação, de javascript não sei nada, com o seu exemplo consegui resolver o meu problema. Valeu amigo, grande abraço.

Criado 26 de maio de 2020

Ultima resposta 5 de jun. de 2020

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados