Repetição

Sampaio_bs · Junho 6, 2019

Galera, boa noite!

Estou conhecendo agora Js, e to com um pouco de dúvida !

O meu código é um cadastro simples. Que depois de preenchido ele envia os meus dados para o footer, ficando "salvo".

Eu não estou conseguindo limpar o que foi digitado quando o clico no botão "save", e como faço para escrever novamente e enviar os dados para baixo do que já está "salvo" ??

Agradeço desde já a ajuda!!

function myFunction(){

    var form = document.getElementById('form-horizontal');
    var name = document.getElementById('name');
    var idade = document.getElementById('idade');
    var email = document.getElementById('email');

    form.addEventListener('submit', function(e){

        document.getElementById('nome').innerHTML = name.value;
        document.getElementById('anos').innerHTML = idade.value;
        document.getElementById('e-mail').innerHTML = email.value;
        document.getElementById("resultado").style.visibility = "visible";

        e.preventDefault();
 
    });
    
}

gabrielms · Junho 8, 2019

@Sampaio_bs O que você quer limpar, a variável com os dados do formulário ou os campos do formulário?

Bom vou deixa um código de exemplo, com ele você pode tirar sua duvida.

Recomendo a você dar uma olhada nos tutoriais da W3Shools.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Formulario</title>
        <style>

            html,body{
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            .left{
                position: fixed;
                width: 49.9%;
                left: 0;
                top: 0;
                bottom: 0;
                color:#fff;
                display: inline-block;
                background: #272727;
                text-align: center;
            }

            .left > div, .right > div{
                padding: 20px;
            }
            
            .right{
                color:#fff;
                display: inline-block;
                background: #141414;
                position: fixed;
                width: 49.9%;
                right: 0;
                top: 0;
                bottom: 0;
                overflow-x: auto;
            }

            form[name="formularioDeCadastro"]{
                max-width: 300px;
                margin: 0 auto;
            }

            form[name="formularioDeCadastro"] > label , input{
                display: block;
                margin-bottom: 10px;
                font-family: sans-serif;
                width: 100%;
            }

            form[name="formularioDeCadastro"] > input{
                padding: 10px;
            }

            form[name="formularioDeCadastro"] > button{
                padding: 7px 10px;
            }

            button.btn{
                padding: 7px 10px;
            }
        </style>
    </head>
    <body>
        <div class="left">
            <div>
                <h4>Formulario de cadastro</h4>
                <form name="formularioDeCadastro">
                    <label>Nome:</label>
                    <input type="text" name="nome">
                    <label>E-mail:</label>
                    <input type="text" name="email">
                    <label>Idade:</label>
                    <input type="text" name="idade">
                    <button type="reset">Limpar</button>
                    <button type="submit">Salvar</button>
                </form>
            </div>
        </div>
        <div class="right">
            <div>
                <button type="button" class="btn" id="btn">Limpar dados cadastrados</button>
                <div id="demostracao">

                </div>
            </div>
        </div>
    <script>

        const 
            formulario = document.forms["formularioDeCadastro"],
            btnLimpar = document.getElementById("btn");
            demo = document.getElementById("demostracao");

        var dadosSalvos = [];

        window.onload = function(){
            formulario.addEventListener('submit', function(e){
                dadosSalvos.push(new usuario(formulario["nome"].value, formulario["email"].value, formulario["idade"].value));
                mostrarDadosSalvos();
                e.preventDefault();
                formulario.reset();
                return false;
            });
            btnLimpar.addEventListener("click", function(){
                dadosSalvos = [];
                mostrarDadosSalvos();
            });
            mostrarDadosSalvos();
        }

        function usuario(nome, email, idade)
        {
            this.nome = nome;
            this.email = email;
            this.idade = idade;
        }

        function mostrarDadosSalvos()
        {
            demo.innerHTML = "";
            let h4, div;
            h4 = document.createElement("h4");
            h4.append(`Número de cadastros: ${dadosSalvos.length}`);
            demo.appendChild(h4);
            for (key in dadosSalvos){
                div = null;
                div = document.createElement("div");
                div.append(`ID: ${key}, Nome: ${dadosSalvos[key]["nome"]}, E-mail: ${dadosSalvos[key]["email"]}, Idade: ${dadosSalvos[key]["idade"]}`);
                demo.appendChild(div);
            }
        }

    </script>
    </body>
</html>

Entrar

Arquivado

Repetição

Recommended Posts

Sampaio_bs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante