0

tenho 2 páginas:

1º Uma página que tem uns checkboxs e um botão de submit do formulário

2ª Uma página que exibe quais checkboxs foram clicados

O problema é que não sei como passar o valor do checkbox de uma página para a outra, poderiam me ajudar?

    <meta charset="utf-8">
    <meta lang="pt-br">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>
    </title>

</head>
<body>
    <form id="form" onsubmit="redirecionaPagina();" method="post">      
        <section class="checkbox-time-coracao">
            <h2 class="h-dois-checkbox">Times:</h2>
                <ul class="ul-times">
                    <li>
                        <input type="checkbox" id="saopaulo" />
                        <label for="saopaulo">São Paulo</label>
                    </li>
                    <li>
                        <input type="checkbox" id="palmeiras" />
                        <label for="palmeiras">Palmeiras</label>
                    </li>
                    <li>
                        <input type="checkbox" id="corinthians" />
                        <label for="corinthians">Corinthians</label>
                    </li>
                </ul>
                <div class="btn-enviar"><input type="submit" value="ENVIAR" class="a-btn-enviar"></div>
        </section>
    </form>


    <script>
        function redirecionaPagina(){

            formAction = document.getElementById("form");

            formAction.action = "pagina2.html";
        }
    </script>


</body>

Aí a minha dificuldade está na 2ª página, não sei como passar quais checksbox's foram clicados

3
  • Pode nos mostrar o que tem feito pf?
    – BrTkCa
    Commented 17/07/2017 às 18:06
  • Juan, sua pergunta é muito ampla, teria como adicionar o código que esta tentando fazer? Commented 17/07/2017 às 18:07
  • Editei agora, está melhor?
    – Juan Lima
    Commented 17/07/2017 às 18:09

2 Respostas 2

1

Existem algumas maneiras de fazer isso:

  • Passar os parâmetros por Ajax para o servidor, e guardar na sessão para utilização posterior (nesse caso você precisaria de um servidor).
  • Guardar os parâmetros em um cookie gerado e consumido pelo JavaScript.
  • Guardar os parâmetros no localStorage (não funciona em browsers antigos).

A menos recomendada (mas possível), é passar os valores de checked dos checkboxes via URL:

<input type="checkbox" id="corinthians" />
<label for="corinthians">Corinthians</label>

corinthiansCheck = document.getElementById("corinthians");
window.location = '/pagina2?corinthians=' + corinthiansCheck;

Dessa forma, no trecho de código Javascript carregado na pagina2você consegue utilizar o valor trueou false do checkbox apenas acessando uma variável normalmente:

if(corinthiansCheck) {
 alert("Timão selecionado!");
}
1
  • Putz, é uma boa, mas no meu caso seriam ínumeras opções para o usuário selecionar e acabaria ficando com muitos parâmetros...
    – Juan Lima
    Commented 17/07/2017 às 18:42
1

Como você já informou que a segunda pagina será em html já reduziu algumas formas possíveis.

Recomendo utilizar a biblioteca JQuery que irá facilitar muito, caso não queira utilizar é necessário codificar uma função semelhante ao serialize() do jquery, que percorre todo o seu formulário pegando name e valor e criando uma string.

Peguei o seu código e fiz uma alteração do ID para NAME, para formulário é necessário NAME nos elementos que serão enviados. Removi o onsubimit do formulário, e com o jquery criei a ação onsubmit, a função event.preventDefault() é pra evitar que o formulário faça o submit. Em seguida usei a função serialize() e concatenei na URL.

<html>
<head>
     <meta charset="utf-8">
    <meta lang="pt-br">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.2.1.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form" method="post">      
        <section class="checkbox-time-coracao">
            <h2 class="h-dois-checkbox">Times:</h2>
                <ul class="ul-times">
                    <li>
                        <input type="checkbox" name="saopaulo"/>
                        <label for="saopaulo">São Paulo</label>
                    </li>
                    <li>
                        <input type="checkbox" name="palmeiras" />
                        <label for="palmeiras">Palmeiras</label>
                    </li>
                    <li>
                        <input type="checkbox" name="corinthians" />
                        <label for="corinthians">Corinthians</label>
                    </li>
                </ul>
                <div class="btn-enviar"><input type="submit" value="ENVIAR" class="a-btn-enviar"></div>
        </section>
    </form>
    <script>
        $( "form" ).on( "submit", function( event ) {
          event.preventDefault(); //
          window.location.href = "pagina2.html?" + $( this ).serialize();
        });       
    </script>
</body>
</html>

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 .