How to take the value of a checkbox with javascript and move to another page?

Asked

Viewed 1,618 times

0

I have 2 pages:

1º A page that has checkboxes and a form Ubmit button

2nd page showing which checkboxes were clicked

The problem is that I do not know how to pass the value of the checkbox from one page to the other, could help me?

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

There my difficulty is on the second page, I do not know how to pass which checksbox’s were clicked

javascript html

  • Can you show us what you’ve done?

  • Juan, your question is too wide, would add the code you are trying to do?

  • I edited it now, it’s better?

2 answers

1

There are some ways to do this:

  • Pass the parameters by Ajax to the server, and save to the session for later use (in that case you would need a server).
  • Store the parameters in a cookie generated and consumed by Javascript.
  • Save parameters to localStorage (does not work on old browsers).

The least recommended (but possible) is to pass checked checkbox values via URL:

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

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

Thus, in the Javascript code snippet loaded on pagina2you can use the value trueor false of the checkbox only accessing a variable normally:

if(corinthiansCheck) {
 alert("Timão selecionado!");
}

  • Putz, it’s a good one, but in my case there would be many options for the user to select and would end up with many parameters...

1

As you have already reported that the second page will be in html already reduced some possible ways.

I recommend using the Jquery library that will make it much easier, if you do not want to use it is necessary to encode a function similar to the serialize() of jquery, which goes through your form taking name and value and creating a string.

I took your code and made an ID change to NAME, for form you need NAME in the elements that will be sent. I removed onsubimit from the form, and with jquery I created the onsubmit action, the Event.preventDefault() function is to prevent the form from doing Submit. Then I used the serialize() function and concluded in the 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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.