Ir ao conteúdo
  • Cadastre-se
kiwsty

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

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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).

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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/.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

adicionado 4 minutos depois

Obrigado pela ajuda, está funcionando perfeitamente em todos os navegadores. 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×