Entrar Ainda não tem acesso?
Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
21
respostas

Como fazer para o input manter o valor após a submissão?

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Aprimorando o layout e atividade Melhorando o Layout

por Caio Basilio
| 136k xp | 89 posts

No código atual deixo a caixa em branco, mas queria que ela não apagasse o que eu escrevo nela.

Eu escrevo algo no input na view, o ajax pega e passa para o controller que grava no banco de dados. Só que depois o input fica em branco. Eu queria que ele persistisse na view o que eu tinha colocado nele para o cliente saber o estado atual da coisa.

@for (variavel = 1; variavel <= Model.FluxoRegra.FP; variavel++)
{
    <div MudarCoberto="MudarCoberto">
        <p>FP0 @variavel <input type="text" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"></p>
    </div>
}
21 respostas
por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

Boa tarde, Caio! Como vai?

Se vc está fazendo tudo com AJAX, então vc pode evitar o recarregamento da página no momento do submit do formulário! Precisando pra isso, fazer o famoso event.preventDefault() dentro do callback de submissão no JavaScript! Algo nesse estilo:

<form id="meuFormulario">
</form>

<script>
     const form = document.querySelector('#meuFormulario");

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

          event.preventDefault();
          // Aqui vc implementa a lógica da requisição AJAX.
     });
</script>

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

por Caio Basilio
| 136k xp | 89 posts

Vou tentar. Mas acho que vou ter que carregar de qualquer jeito porque na mesma página tem outras funções que precisam de carregamento. A página faz outras coisas.

solução!
por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador

Oi Caio tudo bem?

Você pode usar o armazenamento interno do navegador (cookies, localstorage, localsql) para guardar a informação. Ela vai persistir no navegador até a pessoa limpar o cache.

Espero ter ajudado!!!!

por Caio Basilio
| 136k xp | 89 posts

André, como eu faço isso?

por Caio Basilio
| 136k xp | 89 posts

Eu vi esse método colocado no controller:

[OutputCache(Duration = 60)]

Mas não funciona. Conhece outro?

Seria bom um que já fosse colocado no value do input, no html.

por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

Opa, Caio! Vc chegou a testar a solução que eu indiquei? Se sim, o que aconteceu?

Se a solução indicada por mim anteriormente não deu certo, então tenho uma segunda dica:

Tente devolver pra página, através dos dados enviados pelo controlador, o valor que foi digitado no input! Sendo assim, na página a ser carregada, o atributo value do input terá que receber esse valor que foi enviado pelo controlador!

por Caio Basilio
| 136k xp | 89 posts

O que eu estou fazendo é muito específico, nada disso funciona. Isso de retornar foi a primeira coisa que pensei, mas não funciona pois são vários inputs, que são gerados e retirados da página dinamicamente, não posso fixar um valor para todos e nem posso fixar a quantidade de valores, por meio de outras funções do javascript, na mesma página. Não consigo nem explicar direito, estou tentando passar um excel para o mvc, e esse excel tem macros difíceis. Mas eu acho que se fosse algo simples essas soluções sugeridas já resolveriam. Ao mesmo tempo que a página deve ser recarregada, eu não posso guardar esses inputs em variáveis, pois o número de variáveis não pode ser fixado e nem elas podem ser especificadas. A solução que eu acho que funcionaria é guardar no navegador, cookie, cache, etc. é algo realmente só para vizualização, não interfere no banco de dados e na lógica.

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador

Dá uma olhada na minha ideia.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
    function carregar(){
        document.getElementById("nome").value=localStorage.getItem("nome");
        document.getElementById("sobrenome").value=localStorage.getItem("sobrenome");
    }
    function submeter(){
        localStorage.setItem("nome",document.getElementById("nome").value);
        localStorage.setItem("sobrenome",document.getElementById("sobrenome").value);
    }
</script>
<body onload="carregar();">
    <form action="" onsubmit="submeter();">
        <input id="nome">
        <input id="sobrenome">
        <input type="submit">
    </form>
</body>
</html>
por Caio Basilio
| 136k xp | 89 posts

André, tá quase funcionando. Funcionou apenas para o primeiro input gerado de cada tido. Os outros não.

Por exemplo:

FP0 FUNCIONA FP1 NÃO FUNCIONA FP2 NÃO FUNCIONA FA0 FUNCIONA FA1 NÃO FUNCIONA FA2 NÃO FUNCIONA

obs: "MudarCoberto" é usado para outro javascript que faz outra coisa na página e isso está funcionando normalmente.

Código:

<div id="destaque">
    @{int variavel; }
    <body onload="carregar();">
        @for (variavel = 1; variavel <= Model.FluxoRegra.FP; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" onsubmit="submeter();">
                    <p>FP0 @variavel <input id="nome" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.FA; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" onsubmit="submeter();">
                    <p>FA0 @variavel <input id="nome2" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.EX; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" onsubmit="submeter();">
                    <p>EX0 @variavel <input id="nome3" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.RN; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" onsubmit="submeter();">
                    <p>RN0 @variavel <input id="nome4" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.PE; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" onsubmit="submeter();">
                    <p>PE0 @variavel <input id="nome5" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.MSG; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" onsubmit="submeter();">
                    <p>MSG0 @variavel <input id="nome6" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }
    </body>
</div>
por Caio Basilio
| 136k xp | 89 posts
  <script type="text/javascript">

          function carregar() {
                document.getElementById("nome").value = localStorage.getItem("nome");
                document.getElementById("nome2").value = localStorage.getItem("nome2");
                document.getElementById("nome3").value = localStorage.getItem("nome3");
                document.getElementById("nome4").value = localStorage.getItem("nome4");
                document.getElementById("nome5").value = localStorage.getItem("nome5");
                document.getElementById("nome6").value = localStorage.getItem("nome6");

            }
            function submeter() {
                localStorage.setItem("nome", document.getElementById("nome").value);
                localStorage.setItem("nome2", document.getElementById("nome2").value);
                localStorage.setItem("nome3", document.getElementById("nome3").value);
                localStorage.setItem("nome4", document.getElementById("nome4").value);
                localStorage.setItem("nome5", document.getElementById("nome5").value);
                localStorage.setItem("nome6", document.getElementById("nome6").value);
            }

<script >
por Caio Basilio
| 136k xp | 89 posts

Parece que

document.getElementById

e

localStorage.setItem

pegam apenas o primeiro id que aparece em cada tipo. E eu não posso especificar ids diferentes. Apenas posso especificar ids diferentes para cada tipo.

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador

Tenta assim

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function carregar() {

            inputs = document.getElementsByTagName("input");

            for (let k = 0; k < inputs.length; k++) {
                if (inputs[k].getAttribute("type") != "submit") {
                    inputs[k].value = localStorage.getItem(inputs[k].id);
                }
            }



        }
        function submeter(id) {
            localStorage.setItem(id, document.getElementById(id).value);

        }


    </script>
</head>

<body>


    <div id="destaque">
        @{int variavel; }

        <body onload="carregar();">
            @for (variavel = 1; variavel <= Model.FluxoRegra.FP; variavel++) { <div MudarCoberto="MudarCoberto">
                <form action="">
                    <p>FP0 @variavel <input onchange="submeter(this.id);" id="FP@variavel" value="" onblur="MudarCoberto(this)"
                            maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
    </div>

    }


    @for (variavel = 1; variavel <= Model.FluxoRegra.FA; variavel++) { <div MudarCoberto="MudarCoberto">
        <form action="">
            <p>FA0 @variavel <input onchange="submeter(this.id);" id="FA@variavel" value="" onblur="MudarCoberto(this)"
                    maxlength="3" style="width:38px;"><input type="submit"></p>
        </form>
        </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.EX; variavel++) { <div MudarCoberto="MudarCoberto">
            <form action="">
                <p>EX0 @variavel <input onchange="submeter(this.id);" id="EX@variavel" value="" onblur="MudarCoberto(this)"
                        maxlength="3" style="width:38px;"><input type="submit"></p>
            </form>
            </div>

            }


            @for (variavel = 1; variavel <= Model.FluxoRegra.RN; variavel++) { <div MudarCoberto="MudarCoberto">
                <form action="">
                    <p>RN0 @variavel <input onchange="submeter(this.id);" id="RN@variavel" value=""
                            onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit">
                    </p>
                </form>
                </div>

                }


                @for (variavel = 1; variavel <= Model.FluxoRegra.PE; variavel++) { <div MudarCoberto="MudarCoberto">
                    <form action="">
                        <p>PE0 @variavel <input onchange="submeter(this.id);" id="PE@variavel" value=""
                                onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                    </form>
                    </div>

                    }


                    @for (variavel = 1; variavel <= Model.FluxoRegra.MSG; variavel++) { <div
                        MudarCoberto="MudarCoberto">
                        <form action="">
                            <p>MSG0 @variavel <input onchange="submeter(this.id);" id="MSG@variavel" value=""
                                    onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit">
                            </p>
                        </form>
                        </div>

                        }

                        </div>

</body>

</html>

Se não funcionar poderia colocar seu projeto no github para analisarmos melhor?

por Caio Basilio
| 136k xp | 89 posts

Não funcionou, a idéia é outra. Tem que ver o projeto mesmo. Vou colocar o projeto no github. O que não está funcionando tá na view rastreabilidade.

por Caio Basilio
| 136k xp | 89 posts

https://github.com/caiotb/Projeto/blob/master/Projeto5.0.rar

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador

Qual rota eu acesso a view Rastreabilidade direto? Tem como eu ver sem fazer o login? Não sou muito bom ainda com ASP.NET

por Caio Basilio
| 136k xp | 89 posts

Não dá. Está bloqueado se não fizer login. É só ir em registro antes, registrar e depois fazer login. A menos que vc tire o [Autorize] do HomeController. Mas acho que isso daria mais trabalho.

por Caio Basilio
| 136k xp | 89 posts

E ai?

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador

Oi, desculpe a demora.

Dá uma testada agora, testei no seu projeto e funcionou como esperado.

<div id="destaque">
    @{int variavel; }
    <body onload="carregar();">
        @for (variavel = 1; variavel <= Model.FluxoRegra.FP; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" >
                    <p>FP0 @variavel <input  oninput="submeter(this.id);" id="nomeFP_@variavel" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }
    </body>

        @for (variavel = 1; variavel <= Model.FluxoRegra.FA; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" >
                    <p>FA0 @variavel <input  oninput="submeter(this.id);" id="nomeFA_@variavel" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.EX; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" >
                    <p>EX0 @variavel <input  oninput="submeter(this.id);" id="nomeEX_@variavel" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.RN; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="">
                    <p>RN0 @variavel <input  oninput="submeter(this.id);" id="nomeRN_@variavel" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.PE; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" >
                    <p>PE0 @variavel <input  oninput="submeter(this.id);" id="nomePE_@variavel" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }


        @for (variavel = 1; variavel <= Model.FluxoRegra.MSG; variavel++)
        {

            <div MudarCoberto="MudarCoberto">
                <form action="" >
                    <p>MSG0 @variavel <input   oninput="submeter(this.id);" id="nomeMSG_@variavel" value="" onblur="MudarCoberto(this)" maxlength="3" style="width:38px;"><input type="submit"></p>
                </form>
            </div>

        }




        <script type="text/javascript">

            function carregar() {

                inputs = document.getElementsByTagName("input");

                for (let k = 0; k < inputs.length; k++) {
                    if (inputs[k].getAttribute("type") != "submit") {
                        inputs[k].value = localStorage.getItem(inputs[k].id);
                    }
                }



            }
            function submeter(id) {
                localStorage.setItem(id, document.getElementById(id).value);

            }
por Caio Basilio
| 136k xp | 89 posts

Funcionou ! Valeu! Mas o outro javascript da página passou a não funcionar: o que cria os inputs. Vou ver se resolvo aqui para os dois funcionarem.

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador

Ok Caio! Disponha e bons estudos!!

Se o novo erro persistir e para ter mais visibilidade abre um novo tópico na seção de ASP.NET aí mais gente vai vir ajudar.

por Caio Basilio
| 136k xp | 89 posts

Vou abrir. Essa view pode esperar para ser feita.

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA