Onsubmit

Fala ai Philippo, tudo bem? É possível chamar N funções no submit do form.

Você pode fazer através de JavaScript ou HTML.

Via JavaScript você pode adicionar vários listeners para o form através do addEventListener:

form.addEventListener('submit', () => {}) // uma função
form.addEventListener('submit', () => {}) // duas função
form.addEventListener('submit', () => {}) // três função

Ou via HTML:

<form onsubmit="umaVez(); duasVez();">
    ...
</form>

Espero ter ajudado.

Olá, Matheus! Eu tentei fazer a segunda opção, diretamente na tag form, e acrescentei o event.preventDefault(), porque toda vez que eu acrescentava um valor para ser jogado na tabela, a página carregava logo em seguida e não aparecia nada.

Daí eu tentei fazer desse jeito:

<form onsubmit="umaVez(); duasVez(); event.preventDefault();">
    ...
</form>

Só que não deu certo..

Mas vou tentar fazer dentro do JS file pra ver se vai! Daqui a pouco eu retorno haha

Obrigado, Matheus!

Tentei fazer no js, só que acabou acontecendo o mesmo erro quando tinha tentado fazer uma função que abrigasse as funções de cadastrar e editar. Eu fiz o código dessa forma (Eu fiz o código em JQuery, daí espero que esteja certo haha):

JS

let formAluno = $("#form-aluno");

formAluno.submit(() => {cadastrar()});
formAluno.submit(() => {modificar()});

HTML

<form id="form-aluno" onsubmit="~~event~~.preventDefault();">

Como estava carregando imediatamente, assim que eu submetia os dados, eu inseri um onsubmit no form pra chamar a função preventDefault();. O sistema cadastrou, mas, na hora de editar as informações, o código imprime uma entrada dupla (primeiro, ele lança um alert dizendo que os dados foram adicionados - como se tivesse cadastrado - e, depois, lança outro alert, dizendo que os dados foram alterados).

Daí lança uma nova linha na tabela, como se fosse um dado novo, em vez de ter modificado a linha que eu solicitei a edição, e não consigo fazer outra alteração em outra linha que tem na tabela, como se a aplicação tivesse terminado toda a execução (talvez tenha alguma influência do preventDefault() nisso).

Isso tinha acontecido comigo mais cedo e acabei deixando o código só respeitando os atributos dos inputs na hora de cadastrar e, na hora de modificar os dados, quando eu os edito, ficou no onclick mesmo, porque não soube mais como fazer rs

Fala ai Philippo nesse caso vai acontecer exatamente como você disse, o que não está errado.

Você está definindo função cadastrar e modificar para o mesmo formulário, sendo assim, toda vez irá chamar ambas.

O que você precisa fazer é ter apenas uma função, pode ser um salvar.

E dentro dela ter a condição para novo registro ou atualização de algum existente.

Normalmente isso é feito através do id, a gente verifica se o objeto tem id ou não, caso ele tenha id o mesmo já foi salvo então deve ser atualizado, caso contrário o mesmo precisa ser salvo.

Espero ter ajudado.

Oi, Matheus! Tudo bom? O que você quer dizer, então, é para juntar as funções de cadastrar e modificar em uma grande função (salvar) e separar os objetivos (cadastrar e modificar) por meio de condicional?

Na função de modificar, há a atribuição do id para isso, para buscar o objeto que foi inserido quando clica em "Editar" e mostrar os valores em cada campo, na função modificar().

Daí eu não sei se vale à pena colocar o plugin Validator do JQuery para realizar as validações..

Fala ai Philippo, vamos lá:

O que você quer dizer, então, é para juntar as funções de cadastrar e modificar em uma grande função (salvar) e separar os objetivos (cadastrar e modificar) por meio de condicional?

Exatamente, mas, a função não será grande, vai apenas verificar se tem id ou não.

Seria algo mais ou menos assim:

const handleSubmit = data => {
    if (data.id) {
        save(data)
    } else {
        update(data)
    }
}

Ai dentro de cada função save e update você faz a chamada para a API.

Daí eu não sei se vale à pena colocar o plugin Validator do JQuery para realizar as validações.

Acho que para seu cenário vale a pena, ele faz bastante validação pronta.

Espero ter ajudado.

Oi, Matheus! Ajudou bastante! Muito obrigado!! Vou implementar! Ou um ou outro vai hahaha

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Blz, Matheus! Podexá! :D Obrigado, mais uma vez!