Entrar Ainda não tem acesso?
Solucionado (ver solução)
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
| 3485k 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
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

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
| 3485k 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
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

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
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

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
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

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
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

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
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

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.