-2

Tenho uma pagina com filtros, sendo 4 selects, um input search, 2 input date e um submit, preciso manter os dados selecionados após o reload da pagina.

Ou seja coloco os dados para filtrar e após clicar no submit e a pagina carregar preciso que ela mantenha os valores do form conforme selecionado antes do submit.

A principio to salvando em cookie com o código abaixo, porem apesar de estar salvando os cookie blz queria saber se tem como diminuir esse código? Tipo em vez de usar um $.cookie para cada input, usar um para o form todo.

E também gostaria de saber como popular o form de novo com os dados do cookie e se isso não pode me causa problemas ele ficando armazenado, tem como excluir os cookies depois de usá-los?

$(".searchButton").on("click", function () {
	$.cookie('frachiseesValue', $("#frachisees_filter").val());
	$.cookie('schoolsValue', $("#schools_filter").val());
	$.cookie('challengeValue', $("#post_challenges_filter").val());
	$.cookie('statusValue', $("#statuses_filter").val());
	$.cookie('searchValue', $("#filter_search").val());
	$.cookie('startDateValue', $("#startDate").val());
	$.cookie('endDateValue', $("#endDate").val());
});

Update

OBS: Esta sendo salvo no cookie (dos select) o id correspondente ao option e nao a string.

3 Respostas 3

-1

Para carregar o select, faça assim.

1- Carregue os campos do select (todos os itens do select)

$(function(){
    $("#frachisees_filter").val($.cookie('frachiseesValue'));
	$("#schools_filter").val($.cookie('schoolsValue'));
});

E assim sucessivamente para todos os outros selects

1
  • Não deu certo =/, Editei a pergunta coloquei uma obs e talvez pode ser o motivo por não da certo.
    – user27585
    27/04/2017 às 19:21
-2

Tente da seguinte forma:

HTML

<form id="form">
    <div class="col-sm-6">
      <label class="form-label">Name</label>
      <input class="form-control" type="text" id="name" name="name">
      <br>
      <label class="form-label">Option</label>
      <select class="form-control" id="option" name="option">
        <option value="A1">Value 1</option>
        <option value="A2">Value 2</option>
        <option value="A3">Value 3</option>
      </select>
    </div>
    <input type="button" id="btn-save" class="btn btn-success" value="Salvar" />
    <input type="button" id="btn-load" class="btn btn-success" value="Carregar" />
  </form>

JS

$("#btn-save").click(function (e) {

  // obtem um array com os dados do formulario
  let data = $("#form").serializeArray();

  // transforma o array em um JSON e salva no localStorage do browser
  localStorage.setItem('form', JSON.stringify(data));

});

$("#btn-load").click(function (e) {

  // le o que tem salvo no localStorage
  let values = localStorage.getItem('form');

  // se existir algo
  if (values) {
    // transforma novamente em um array os dados do JSON salvo
    let data = JSON.parse(values);

    // percorre o array e atribui ao formulário os dados
    $.each(data, function (index, item) {
      $(`#${item.name}`).val(item.value);

      // apenas para debug
      console.log(item.name, item.value)
    });
  }
});
1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    4/05/2022 às 13:43
-2

Em sua pergunta, você citou vários tipos de campos HTML, mas não postou nenhum. Portanto, apenas para fins didáticos, vou assumir que todos os campos eram do tipo texto, além disso, o código abaixo é capaz de gravar e ler os dados via cookie, sem falar que é uma forma de reduzir o uso do termo "cookie" deixando o código mais limpo e legível:

<!DOCTYPE html>
<html>
<head>
    <title>My Form Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
    <h1>My Form Page</h1>
    <form>
        <label for="frachisees_filter">Franchisees:</label>
        <input type="text" id="frachiseesValue" name="frachiseesValue">
        <br>
        <label for="schoolsValue">Schools:</label>
        <input type="text" id="schoolsValue" name="schoolsValue">
        <br>
        <label for="post_challenges_filter">Challenge:</label>
        <input type="text" id="challengeValue" name="challengeValue">
        <br>
        <label for="statuses_filter">Status:</label>
        <input type="text" id="statusValue" name="statusValue">
        <br>
        <label for="filter_search">Search:</label>
        <input type="text" id="searchValue" name="searchValue">
        <br>
        <label for="startDate">Start Date:</label>
        <input type="text" id="startDateValue" name="startDateValue">
        <br>
        <label for="endDate">End Date:</label>
        <input type="text" id="endDateValue" name="endDateValue">
        <br>
        <button type="button" class="searchButton">Search</button>
    </form>

    <script>
        $(document).ready(function () {
            const valuesToGet = [
                "frachiseesValue",
                "schoolsValue",
                "challengeValue",
                "statusValue",
                "searchValue",
                "startDateValue",
                "endDateValue"
            ];
            for (const key of valuesToGet) {
                const value = $.cookie(key);
                if (value) {
                    $(`#${key}`).val(value);
                }
            }
        });

        $(".searchButton").on("click", function () {
            const valuesToSet = {
                frachiseesValue: $("#frachiseesValue").val(),
                schoolsValue: $("#schoolsValue").val(),
                challengeValue: $("#challengeValue").val(),
                statusValue: $("#statusValue").val(),
                searchValue: $("#searchValue").val(),
                startDateValue: $("#startDateValue").val(),
                endDateValue: $("#endDateValue").val()
            };
            for (const key in valuesToSet) {
                $.cookie(key, valuesToSet[key]);
            }
        });
    </script>
</body>
</html>

Talvez deva considerar "sanitizar" a entrada do usuário antes de exibir o conteúdo do cookie no formulário.

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