How to add checkbox values and send this value to another page through Javascript?

Question

How to add checkbox values and send this value to another page through Javascript?

Asked 5 years, 1 month ago

Viewed 214 times

0

I have the checkboxes and below I have a button. I would like to press this button to save the sum value and send it to the next page. Ex: if the sum was three, I would like the other page to show that 3. I left below only two checkboxes, each one would be one, how can I do that? I’m using the Materialize framework.

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8/"/>
    </head>

    <body>
        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <h1>Formulário</h1>
        <form action="katzresult.html">
            <p>
                <label>
                    <input type="checkbox" class="filled-in" id="checkbox1" value = "1"/>
                    <span>1. Texto 1</span>
                </label>
            </p>
            <hr>
            <p>
                <label>
                    <input type="checkbox" class="filled-in" id = "checkbox2" value = "1"/>
                    <span>2. Texto 2</span>
                </label>
            </p>
            <div id="container">
            <button class="btn waves-effect waves-light" name="action">Calcular
                <i class="material-icons right">send</i>
            </button>
        </div>
        </form>
    </body>
</html>

The JS on page 1:

document.forms[0].onsubmit = function(){

   var checados = document.querySelectorAll("form :checked");
   var soma = 0;
   for(var x=0; x < checados.length; x++){
      soma += parseInt(checados[x].value);
   }

   document.querySelector("[name=action]").value = soma;

}

And the JS on page 2:

var url = location.href; // pega a URL da página
var valor = url.match(/action=(\d+)$/); // pega o valor de "action"

You cannot put the button inside the form?

– Sam

2019/05/13 at 23:15
You want to catch this "3" on the other page with JS?

– Sam

2019/05/13 at 23:24

1 answer

Browser other questions tagged javascript html5 css3

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

by Sam • **79,597** points · Answer 1 · 2019-05-13T23:36:56+00:00

Place the button inside the form so it can submit the form. No need to put type="submit" on the button because he’s already by nature type="submit".

Place values in checkboxes. These values will be summed. For example:

       ↓↓↓↓↓↓↓↓↓
<input value="1" type="checkbox" class="filled-in" id="checkbox1"/>

Place the address of the other page on action form:

<form action="outrapagina.html">

Create a Event Handler onsubmit for the form and add the value of checkboxes making a loop for.

Put the sum result as value button when submitting the form.

The JS will be like this:

document.forms[0].onsubmit = function(){

   var checados = document.querySelectorAll("form :checked");
   var soma = 0;
   for(var x=0; x < checados.length; x++){
      soma += parseInt(checados[x].value);
   }

   document.querySelector("[name=action]").value = soma;

}

Suppose the sum of values of checkboxes is 3, then when you submit the form, you will be directed to the URL:

outrapagina.html?action=3

Note that the URL has a parameter action worthwhile 3.

On the other page you can recover this value as follows:

var url = location.href; // pega a URL da página
var valor = url.match(/action=(\d+)$/); // pega o valor de "action"

The variable valor will be 3.