How do I get the value of a checkbox with javascript and move to another page?

Question

How do I get the value of a checkbox with javascript and move to another page?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have 2 pages:

A page that has a checkbox and a form submit button

2nd A page that shows which checkboxes have been clicked

The problem is that I do not know how to pass the checkbox value from one page to another, could you 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>

Then my difficulty is on the 2nd page, I do not know how to pass which checksbox's were clicked

javascript html

asked by anonymous 17.07.2017 / 20:05

2 answers

Is there a root user in PHP? Hover and Disabled at the same time

score 1 · Answer 1

There are a few ways to do this:

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

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

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

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

In this way, in the Javascript snippet loaded in pagina2 you can use the value true or false of the checkbox just by accessing a variable normally:

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

score 1 · Answer 2

As you already informed 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, you need to encode a function similar to jquery serialize (), which scrolls through your form taking name and value and creating a string.

I took your code and made a change from ID to NAME, so NAME is required in the elements that will be sent. I removed the onsubimit from the form, and with jquery I created the onsubmit action, the event.preventDefault () function is to prevent the form from submitting it. Then I used the serialize () function and concatenated 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>