Jump to content

Recommended Posts

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();
 
    });
    
}

 

 

Share this post


Link to post
Share on other sites

@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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By asacap1000
      Galera me ajudem por favor, estou pirando kkkkk
       
      Seguinte, tenho um form que realiza o submit via javascrit enviando os dados para uma página php formatada em json.
      Está gravando perfeitamente porém preciso dos dados do retorno, como Link do boleto, e alguns outros resultados para inserir no banco nesse ponto já pesquisei um monte testei de tudo até a página bugar e nada kkkk
       
      o Script que utilizo para o envio é esse:
       
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#frmBoleto").submit(function(){ $.ajax({ type: "POST", url: "https://www.sitedaloja.com.br/action/boleto_bradesco/gerando_boleto.php", data: $(this).serializeArray(), }).done(function( msg ) { }); return false; }); </script> Como fazer para capturar os dados  da resposta do json?  
    • By Sapinn
      Salve salve! Nuca intendi como isso realmente funciona por isso gostaria da ajuda de vcs. Estou desenvolvendo um sistema de historias e acho que seria interessante no envio dessas historia além dos texto imagem ilustrativas, mais ou menos como blogs de noticias fazem, mas como posso enviar texto e imagem e depois retorna-los juntos? Eu sei com enviar imagens em php mas gostaria de enviar a imagem e o texto colocando ambos em um textarea acho que assim ficaria bem mais interessante alguém pode me ajuda?
       
    • By clickanapolis
      Boa tarde pessoal, desculpa se postei em lugar errado, mais não sei aonde postar essa minha dúvida. Estou finalizando um projeto que consiste em uma plataforma de processo seletivo e na etapa final os candidatos iram fazer uma prova online.
       
      O cliente me perguntou se é possível bloquear o navegador, tipo se ele sair do navegador ou mudar de aba tipo o sistema finalizar a prova do candidato, visto que o sistema irá identificar que ele foi fazer uma pesquisa.
       
      Eu particularmente não vi nada igual ate hj e não sei se existe algo seja em javascript ou qualquer outro modo de fazer isso.
    • By FilipeON
      Olá Sou iniciante em Javascript... Preciso de ajuda para a seguinte questão:
      Tenho duas FUNÇÕES e preciso executa-las de forma aleatória, já tentei de varias formas, mas sem sucesso, alguém pode me ajudar?
      Basicamente o que preciso é que toda vez que a pagina WEB for carregada uma das duas funções seja sorteada e executada.
       
      As funções são:
      function vt1(){fireEvent (document.getElementById('bt-1'), 'click');} function vt2(){fireEvent (document.getElementById('bt-2'), 'click');}
       
    • By Danilo - Jesus voltará!
      Olá, estou fazendo um cálculo de horas para cartão ponto em php e jquery... o cálculo do php já consegui um satisfatório. Preciso agora ao preencher os campos que são gerados dinamicamente de 1 a 31 que são os dias do mês, ao sair do campo Jornada (horas de trabalho), ele envie via ajax os valores preenchidos nesses 4 campos anteriores que são 4 inputs de tempo (time).
      Eu consegui recuperar individualmente, mas ele passa a chamada da função em todos, se dou um alert por exemplo ele percorre todos os campos dinâmicos para aí ir para o outro input, que no caso acontece a mesma coisa, segue o script que utilizei para pegar o valor do input individual, aí preciso que não percorra todos e pegue apenas o valor de cada um no onblur do campo jornada conforme está na figura e me retorne para os campos específicos com os dados que pegarei no php,. Espero ter sido claro, se alguém puder ajudar eu agradeço.
       
      $(document).ready(function() { $(":input").blur(function() { var id = $(this).attr('id'); var value = $(this).val(); alert(id + " " + " " + value); }); }); O que preciso está na figura abaixo:
       

       
      Aguardo, se alguém puder ajudar...agradeço
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.