HTML Radio button que depois de marcado permanece marca mesmo quando atualiza a págin

kiwsty · 23 de março de 2018

Eu gostaria de saber se tem como criar um radio button que quando o usuário assinale ele permaneça marcado mesmo depois de atualizar ou fechar o navegador, para quando ele voltar ainda permaneça da forma que ele marcou.

XenoStory · 23 de março de 2018

Boa tarde, Kiwsty

Sim, é possível, porém seria necessário utilizar uma linguagem server-side e um banco de dados. O banco de dados seria para armazenar o valor deste campo (se foi marcado ou não), então quando sua página fosse carregada pelo usuário, a linguagem server-side (como PHP, por exemplo) realizaria a requisição dessa informação para o banco de dados, passando essa informação para a sua a View (página em que o raddio button está), fazendo com que ele fique marcado ou desmarcado. Basicamente, a ideia é essa. Você conhece os conceitos citados? Ficou alguma dúvida?

Comenta aí que vamos te dando o suporte!

Abraços e bons estudos.

kiwsty · 23 de março de 2018

Infelizmente está avançado demais pra mim. O que eu queria, pode ser encontrado nesse exemplo, mas não funciona em meu site.

HwapX · 24 de março de 2018

Algo especifico para input type="radio" com base no seu exemplo seria.

function autoSaveRadioSelection(radioname) {
  //Carrega o valor salvo
  var selectedValue = localStorage.getItem(radioname);
  //Busca os radio boxes
  var radioboxes = document.getElementsByName(radioname);

  function saveStatus(){
    //Grava o valor do radio selecionado
    localStorage.setItem(this.name, this.value);
  };

  //Navega pelos radios existentes
  radioboxes.forEach(function(radio) {
    //vincula o evento de alteração a função que salva o valor
    radio.oninput = saveStatus;
    //Marca ou não o radio comparando seu valor com o valor salvo
    radio.checked = selectedValue == radio.value; 
  });
}

autoSaveRadioSelection('nome do campo');

Você pode testar em https://codepen.io/anon/pen/gexLEm.

kiwsty · 24 de março de 2018

Eu testei, mas quando atualiza a página limpa a seleção.

HwapX · 24 de março de 2018

Você fez o teste no codepen ou no seu site?

Se testou no seu site verifique se os inputs type="radio" possuem os atributos name e value preenchidos lembrando que name deve ser o mesmo para todos os radios e value deve ser diferente.

Caso tenha testado no codepen e não obteve sucesso me informe o navegador e a versão que utilizou.

Outro detalhe é que a função autoSaveRadioSelection('nome do campo'); deve ser chamada após os radios serem carregados, para isso o script deve ser colocado no final da páǵina antes do fechamento da tag <body>.

kiwsty · 24 de março de 2018

Testei no codepen pelo Firefox e funcionou, mas pelo Chrome e Internet Explorer não funcionou.

HwapX · 24 de março de 2018

Atualizei o exemplo https://codepen.io/anon/pen/gexLEm.

function autoSaveRadioSelection(radioname) {
  //Carrega o valor salvo
  var selectedValue = localStorage.getItem(radioname);
  //Busca os radio boxes
  var radioboxes = document.getElementsByName(radioname);

  function saveStatus(){
    //Grava o valor do radio selecionado
    localStorage.setItem(this.name, this.value);
  };

  //Navega pelos radios existentes
  for(key in radioboxes) {
    radio = radioboxes[key];
    //vincula o evento de alteração a função que salva o valor
    radio.onchange = saveStatus;
    //Marca ou não o radio comparando seu valor com o valor salvo
    radio.checked = selectedValue == radio.value; 
  };
}

autoSaveRadioSelection('nome do campo');

Resumos alterações.

Para resolver o problema no chrome alterei o evento oninput para onchange:

Não consegui testar no IE ou EDGE pois estou utilizando Linux no momento, mas alterei o radioboxes.forEach que requer o IE 11 para o for(key in radioboxes) reduzindo os requisitos para o IE 8 determinado pelo uso do localStorage(https://developer.mozilla.org/pt-BR/docs/Web/API/Window/Window.localStorage).

kiwsty · 24 de março de 2018

Funcionou no Chrome, mas no IE e EDGE não. Amanhã vou tentar no meu site, porque hoje não dá mais tempo. Obrigado pela a ajuda.

HwapX · 24 de março de 2018

Ainda não consegui testar no IE nem EDGE mas criei uma alternativa utilizando cookie no lugar do localStorage, porém só pude testá-la no Firefox 59.

function autoSaveRadioSelection(radioname) {
  //Expressão regular para extrair o cookie
  var regex = new RegExp('('+radioname+'=)([^;]+)');
  var match = regex.exec(document.cookie);
  
  //Extrai o valor do cookie
  var selectedValue = match ? match[2] : null;
  //Busca os radio boxes
  var radioboxes = document.getElementsByName(radioname);

  function saveStatus(){
    //Data de expiração do cookie data atual + 1 ano
    var dt = new Date();
    dt.setFullYear(dt.getFullYear() + 1);
    //Monta e grava o cookie
    document.cookie = this.name + '=' + this.value + '; expires=' + dt + ';path=/;';
  };

  //Navega pelos radios existentes
  for(key in radioboxes) {
    radio = radioboxes[key];
    //vincula o evento de alteração a função que salva o valor
    radio.onchange = saveStatus;
    //Marca ou não o radio comparando seu valor com o valor salvo
    radio.checked = selectedValue == radio.value; 
  };
}

autoSaveRadioSelection('nome do campo');

Em principio essa versão deveria suportar todos os navegadores, porém como não pude testar pode existir alguma particularidade que desconheço.

Você pode testá-la em https://codepen.io/anon/pen/mxMWLo.

kiwsty · 24 de março de 2018

O ultimo código postado ainda continua não funcionando no IE e nem EDGE. Deu tempo de testar em meu site, mas não ta funcionando. No Chrome limpa a seleção quando atualiza, já no Firefox permanece quando atualiza mas se fechar o navegador ou mudar de página, também limpa a seleção. Não sei o que pode ta errado com o código, se puder me ajudar eu agradeço.

<!DOCTYPE html>
<html>
<body>

<div id="radiobox-container">
  <div>
    <label>
      Option 1
      <input type="radio" name="test" value="option1">
    </label>
  </div>
  <div>
    <label>
      Option 2
      <input type="radio" name="test" value="option2">
    </label>
  </div>
  <div>
    <label>
      Option 3
      <input type="radio" name="test" value="option3">
    </label>
  </div>
</div>

<script>
  function autoSaveRadioSelection(radioname) {
  //Expressão regular para extrair o cookie
  var regex = new RegExp('('+radioname+'=)([^;]+)');
  var match = regex.exec(document.cookie);
  
  //Extrai o valor do cookie
  var selectedValue = match ? match[2] : null;
  //Busca os radio boxes
  var radioboxes = document.getElementsByName(radioname);

  function saveStatus(){
    //Data de expiração do cookie data atual + 1 ano
    var dt = new Date();
    dt.setFullYear(dt.getFullYear() + 1);
    //Monta e grava o cookie
    document.cookie = this.name + '=' + this.value + '; expires=' + dt + ';path=/;';
  };

  //Navega pelos radios existentes
  for(key in radioboxes) {
    radio = radioboxes[key];
    //vincula o evento de alteração a função que salva o valor
    radio.onchange = saveStatus;
    //Marca ou não o radio comparando seu valor com o valor salvo
    radio.checked = selectedValue == radio.value; 
  };
}

autoSaveRadioSelection('test');
</script>
</body>
</html>

HwapX · 24 de março de 2018

Consegui testar no IE e atualizei os exemplos.

Versão que utiliza cookies https://codepen.io/anon/pen/mxMWLo.

function autoSaveRadioSelection(radioname) {
  //Expressão regular para extrair o cookie
  var regex = new RegExp('('+radioname+'=)([^;]+)');
  var match = regex.exec(document.cookie);
  
  //Extrai o valor do cookie
  var selectedValue = match ? match[2] : null;
  //Busca os radio boxes
  var radioboxes = document.getElementsByName(radioname);

  function saveStatus(){
    //Data de expiração do cookie data atual + 1 ano
    var dt = new Date();
    dt.setFullYear(dt.getFullYear() + 1);
    //Monta e grava o cookie
    document.cookie = this.name + '=' + this.value + '; expires=' + dt + ';path=/;';
  };
  
  //Navega pelos radios existentes
  for(var i = 0; i < radioboxes.length; i++) {
    radio = radioboxes[i];
    //vincula o evento de alteração a função que salva o valor
    radio.onchange = saveStatus;
    //Marca ou não o radio comparando seu valor com o valor salvo
    radio.checked = selectedValue == radio.value; 
  };
}

autoSaveRadioSelection('nome do campo');

Versão que utiliza localStorage https://codepen.io/anon/pen/gexLEm.

function autoSaveRadioSelection(radioname) {
  //Carrega o valor salvo
  var selectedValue = localStorage.getItem(radioname);
  //Busca os radio boxes
  var radioboxes = document.getElementsByName(radioname);

  function saveStatus(){
    //Grava o valor do radio selecionado
    localStorage.setItem(this.name, this.value);
  };

  //Navega pelos radios existentes
  for(var i = 0; i < radioboxes.length; i++) {
    radio = radioboxes[i];
    //vincula o evento de alteração a função que salva o valor
    radio.onchange = saveStatus;
    //Marca ou não o radio comparando seu valor com o valor salvo
    radio.checked = selectedValue == radio.value; 
  };
}

autoSaveRadioSelection('nome do campo');

Resumo das alterações o for(key in radioboxes) foi alterado para for(var i = 0; i < radioboxes.length; i++) pois no IE estava iterando sobre as propriedades do objeto radioboxes e não sobre seus itens.

Nos meus testes obtive o seguinte resultado.

Firefox, memorizou e restaurou a opção após atualizar e reiniciar.
Chrome, memorizou e restaurou a opção após atualizar a página(não pude testar reiniciar pois estava utilizando ferramentas online).
IE, memorizou e restaurou após atualizar(não pude testar reiniciar pois estava utilizando ferramentas online).
EDGE, não pude testar.

kiwsty · 24 de março de 2018

Testei no EDGE e tá funcionando, mas no meu site não. Não sei se pode ser algum erro no código.

<!DOCTYPE html>
<html>
<body>

<div id="radiobox-container">
  <div>
    <label>
      Option 1
      <input type="radio" name="test" value="option1">
    </label>
  </div>
  <div>
    <label>
      Option 2
      <input type="radio" name="test" value="option2">
    </label>
  </div>
  <div>
    <label>
      Option 3
      <input type="radio" name="test" value="option3">
    </label>
  </div>
</div>

<script>
  function autoSaveRadioSelection(radioname) {
  //Carrega o valor salvo
  var selectedValue = localStorage.getItem(radioname);
  //Busca os radio boxes
  var radioboxes = document.getElementsByName(radioname);

  function saveStatus(){
    //Grava o valor do radio selecionado
    localStorage.setItem(this.name, this.value);
  };

  //Navega pelos radios existentes
  for(var i = 0; i < radioboxes.length; i++) {
    radio = radioboxes[i];
    //vincula o evento de alteração a função que salva o valor
    radio.onchange = saveStatus;
    //Marca ou não o radio comparando seu valor com o valor salvo
    radio.checked = selectedValue == radio.value; 
  };
}

autoSaveRadioSelection('test');
</script>
</body>
</html>

HwapX · 24 de março de 2018

Tem como disponibilizar uma URL publica do seu site com esse código? Pois coloquei esse HTML que você postou em um host gratuito e está funcionando, pode conferi-lo em http://hwapx.bitballoon.com/.

kiwsty · 24 de março de 2018

https://animeaki.com/radio-button

HwapX · 24 de março de 2018

Não sei como você faz para inserir o código na sua pagina mas diversas tags <p> foram inseridas no meio do script, você pode verificar clicando com o botão direito do mouse e selecionando Ver Código-fonte.

kiwsty · 24 de março de 2018

Eu apenas colei na caixa de texto do Wordpress.

HwapX · 24 de março de 2018

Você vai precisar descobrir um meio de remover essas tags que foram inseridas indevidamente.

kiwsty · 24 de março de 2018

Descobri o problema, eram os espaços no script.

CÓDIGO COM ERRO

<script>
  function autoSaveRadioSelection(radioname) {
  //Carrega o valor salvo
  var selectedValue = localStorage.getItem(radioname);
  //Busca os radio boxes
  var radioboxes = document.getElementsByName(radioname);

  function saveStatus(){
    //Grava o valor do radio selecionado
    localStorage.setItem(this.name, this.value);
  };

  //Navega pelos radios existentes
  for(var i = 0; i < radioboxes.length; i++) {
    radio = radioboxes[i];
    //vincula o evento de alteração a função que salva o valor
    radio.onchange = saveStatus;
    //Marca ou não o radio comparando seu valor com o valor salvo
    radio.checked = selectedValue == radio.value; 
  };
}

autoSaveRadioSelection('test');
</script>

--------------------------------------------------------------------------------

CÓDIGO SEM ERRO

<script>function autoSaveRadioSelection(radioname) {
  //Carrega o valor salvo
  var selectedValue = localStorage.getItem(radioname);
  //Busca os radio boxes
  var radioboxes = document.getElementsByName(radioname);
  function saveStatus(){
    //Grava o valor do radio selecionado
    localStorage.setItem(this.name, this.value);
  };
  //Navega pelos radios existentes
  for(var i = 0; i < radioboxes.length; i++) {
    radio = radioboxes[i];
    //vincula o evento de alteração a função que salva o valor
    radio.onchange = saveStatus;
    //Marca ou não o radio comparando seu valor com o valor salvo
    radio.checked = selectedValue == radio.value; 
  };
}
autoSaveRadioSelection('test');
</script>