1

O meu problema é que estou fazendo um cadastro de empresas, neste cadastro tenho o campo Ramo de atividades que dispõe de um combo com os ramos de atividades cadastrados na base de dados, o problema é quando temos que incluir um novo ramo de atividades. Nesse caso, tenho um botão que abre uma nova janela para realizar este cadastro, depois do cadastro ter sido concluído ele dá um reload (refresh) na página do cadastro principal e é neste momento que perco as informações.

Queria saber se é possível manter as informações do form de alguma forma após eu cadastrar o ramo de atividade novo, que quando voltasse para a página do cadastro principal voltasse com os valores que estavam preenchidos antes.

4
  • Pode utilizar sessionStorage ou localStorage para isto. Commented 14/11/2018 às 11:32
  • Consegue me ajudar com um exemplo de como fazer com um dos dois ?
    – Kevin.F
    Commented 14/11/2018 às 12:35
  • O ideal é usar Ajax na nova janela e adicionar dinamicamente um novo item no combo sem dar refresh na página.
    – Sam
    Commented 14/11/2018 às 13:52
  • @Kevin.F conseguiu utilizar o exemplo que criei para ajuda-lo ? Commented 14/11/2018 às 16:55

1 Resposta 1

1

Olá, é possível sim.

Fiz um código simples com comentários que irão te ajudar à entender como fazer isso:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


window.onload = function() {
        //Uso de localStorage
        //var name = localStorage.getItem("name");
        //var email = localStorage.getItem("email");
        //var phone = localStorage.getItem("phone");
        var name = sessionStorage.getItem("name");
        var email = sessionStorage.getItem("email");
        var phone = sessionStorage.getItem("phone");
        if (name !== null) $('#inputName').val(name);
        if (email !== null) $('#inputEmail').val(email);
        if (phone !== null) $('#inputPhone').val(phone);

}

function myFunction() {
    //Uso de localStorage
    //window.localStorage.setItem("name", $('#inputName').val());
    //window.localStorage.setItem("email", $('#inputEmail').val());
    //window.localStorage.setItem("phone", $('#inputPhone').val());
    sessionStorage.setItem("name", $('#inputName').val());
    sessionStorage.setItem("email", $('#inputEmail').val());
    sessionStorage.setItem("phone", $('#inputPhone').val());
    location.reload(true);
}

</script>

</head>
<body>

<div class="form-actions">
        <form>
            <table cellpadding = "5" cellspacing ="10">
                <tr class="control-group">
                    <td style="width: 100px;">
                        <div>Name:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputName" placeholder="Nome" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Email:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input class="span3" placeholder="Email" id= "inputEmail" type="email" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Phone:&nbsp;</div>
                    </td>
                    <td>
                        <input type="text" id="inputPhone" placeholder="Telefone">
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <div align="center">
                            <button id="btnConfirm" class="btn btn-primary" onclick="myFunction();">Carregar a página</button>
                            <input type="reset" value="Limpar" id="btnReset" class="btn"/>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>


</body>
</html> 

Nota: Basta copiar esse código colar em um arquivo .html para testar localmente.

Bons estudos e espero ter ajudado!

10
  • Ele só armazena localmente se eu clicar no botão refresh ?
    – Kevin.F
    Commented 14/11/2018 às 15:24
  • No exemplo que fiz, para facilitar o entendimento adicionei no botão refresh para capturar o evento "onClick" e realizar a gravação dos valores, você pode adapta ao seu projeto. Commented 14/11/2018 às 15:35
  • Mas a ideia é você entender o que o javascript está fazendo neste exemplo. Commented 14/11/2018 às 15:39
  • Consegue implementar mais uma coisa ? Por exemplo tem como armazenar os dados até sair da página ? Pois neste exemplo é armazenado mesmo saindo e voltando da página, só preciso que fique salvo ao dar refresh.
    – Kevin.F
    Commented 14/11/2018 às 15:43
  • Ao sair da página você quer zerar esses valores, é isso? Commented 14/11/2018 às 15:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .