Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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>.

Editado por HwapX

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

Editado por HwapX

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

Eu apenas colei na caixa de texto do Wordpress. 

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. 

Editado por kiwsty
  • 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






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

×