Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como criar um formulário com o jquery?

boa boite, estou tentando criar um formulário que nem da aula de Js só que eu quero usar os comandos do jquery e estou um pouco perdido, apenas quero criar um botão que adicione pessoas ao formulário. isso foi o que eu criei ate agora

HTML

<form id="form-adicionar">


    <label for="nome">Nome: </label>
    <input id="nome"type="text" name="nome" placeholder="Digite o primeiro nome">


    <label for="sobre-nome">SobreNome:</label>
    <input type="text" id="sobre-nome" placeholder="Digite o sobrenome">


    <label for="idade">Idade:</label>
    <input type="text" id="idade" placeholder="Digite a idade">

    <button id="adiconar-aluno">Adiconar</button>
</form>

JS

<script>

    var botaoAdiconar = $("#adiconar-aluno");
    botaoAdiconar.on("click", function(event){
        event.preventDefault();

        var form = $("#form-adicionar");

        var tabela = $("#tabela-alunos");

        var nome = form.nome.value;

        $("tr");

        $("td");

        td.textContent = nome;

        form.reset();

        tabela.appendChild(tr);


    });

</script>
1 resposta
solução!

Fala aí Leveditor, tudo bem? Seu código possuí alguns problemas, por exemplo:

  • Você não está definindo as variáveis td e tr.
  • A criação do td e tr em jQuery é diferente.
  • Para pegar o campo nome do form você precisa pegar o elemento DOM dele.

Fiz algumas mudanças que devem funcionar:

var botaoAdiconar = $("#adiconar-aluno")
botaoAdiconar.on("click", function(event) {
    event.preventDefault()

    var $form = $("#form-adicionar")[0]
    var $tabela = $("#tabela-alunos")
    var $tr = $("<tr></tr>")
    var $td = $("<td></td>")
    var nome = $form.nome.value

    $td.text(nome)
    $tr.append($td)
    $tabela.append($tr)
    $form.reset()
})

Espero ter ajudado.