Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display Selected Checkboxes on Another Page Using JavaScript
In this article, you will learn about how to get all the checked boxes on the other page using JavaScript. The checkbox is a type of selection that is a type of binary selection either true or false. It is an option of GUI form present on the page and using this we can take more input from the user. If a box is checked, it indicates true, which means that the user has selected the value and in case the box is unmarked then it indicates that the user has not selected the value.
The difference between the checkbox and the radio button is that with the radio button user can select only a single value whereas with the checkbox user will be allowed to select multiple values.
Example of checkbox
<html>
<body>
<input type="checkbox" value="false" onchange="alert('checked')"/>Example of checkbox <br/>
</body>
</html>
Here from the above output, you can observe that box is checked, and this indicates that the user has selected the value.
The JSON.parse() method always takes its argument in string format (i.e. we have to wrap the value with-in single inverted commas).
Example
Let's see an example with a program:
<html>
<body>
<form>
<h1>Print checked button values.</h1> <hr/>
<big>Select your favourite fruits: </big><br />
<input type="checkbox" name="inputCheck" value="Apple" />Apple<br />
<input type="checkbox" name="inputCheck" value="Mango" />Mango<br />
<input type="checkbox" name="inputCheck" value="Banana" />Banana<br />
<input type="checkbox" name="inputCheck" value="Orange" />Orange<br />
<p>
<input type="submit" id="submitBtn" value="submit" onclick="printChecked()"/>
</p>
</form>
<script type="text/javascript">
function printChecked() {
var items = document.getElementsByName("inputCheck");
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].checked == true){
selectedItems+=items[i].value+"
";
}
}
alert(selectedItems);
}
</script>
</body>
</html>
From the output, you can observe that we are printing the selected checkbox valued by an alert message whiting the same page. Before that let's get to know about the concept of local storage.
Using the Local Storage in JavaScript
LocalSorage is a type of data storage in the web browser. Using this site can store the data and it will always be persisted within the storage and will not get vanished when you close the browser.
Another option is a cookie which is also used to store the site data. This storage limit is approx. 2Mb in the browser whereas localStorage comes with storage of 5Mb which is greater in terms of cookie storage size
Some of the terms that users should remember in order to use localStorage effectively and safely.
It is not safe in terms of storing sensitive data like passwords and other information which users should not share in public.
Is store the data in the browser itself not on the server? And its operation is synchronous means sequentially one after another operation gets handled.
It has more capacity to store the data compared to cookie storage size.
It is supported by almost all modern browsers and compatible with the latest version.
Checking LocalStorage Browser Compatibility
To check if your browser supports the localStorage execute the following code into your browser console if it will be undefined then it means your browser supports the localStorage.
Example
<html>
<body>
<script type="text/javascript">
if (typeof(Storage) !== "undefined") {
document.write("Your browser support localStorage.")
}
else {
document.write("Your browser doesn't support localStorage.")
}
</script>
</body>
</html>
The localStorage methods used
1. setItem()
This method is used to add the data to the storage. We pass the key and value to this method to add the data.
localStorage.setItem("name", "Kalyan");
2. getItem()
This method is used to get or retrieve the data present in the storage. We pass the key into this method to get the value related to that key.
localStorage.getItem("name");
3. removeItem()
This method is used to remove the specific data present in the storage. We pass the key into this method, and it removes the key-value pair present as the data in the storage.
localStorage.removeItem("name");
4. clear()
This method is used to clear the local storage data present in the storage.
localStorage.clear();
Tip: to check the size of the localStorage you can execute the following syntax int the browser console
console.log(localStorage.length);
Let's send this value to another page. We will first add all the selected checked values into the local storage using setItem() and on the next page, we will take out the values using the getItem() method.
Our JavaScript function to add value to local storage will be
<script type="text/javascript">
function printChecked() {
var items = document.getElementsByName("inputCheck");
var arr=[];
for (var i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].checked == true){
arr.push(items[i].value);
}
}
localStorage.setItem("ddvalue", arr);
return true;
}
</script>
Here in the items variable take all the checkbox item and in the arr array, we will add all the item which has been marked as true means the user has checked. And add the array to the local storage.
JavaScript function to retrieve the value form the storage on the second page
<script>
var arr=localStorage.getItem("ddvalue");
var selectedItems = "";
for (var i = 0; i < arr.length; i++) {
selectedItems += arr[i] + ", ";
}
document.getElementById("result").innerHTML= selectedItems;
</script>
Here in the array arr will store the retrieved value from the storage with the key value. And we will take an empty string variable named as selected items and we will append all the array items. Finally, we will print that at the place of the id result.
page1.html
<html>
<body>
<form action="page2.html">
<h1>Page1</h1> <hr/>
<big>Select your favourite fruits: </big><br />
<input type="checkbox" name="inputCheck" value="Apple" />Apple<br />
<input type="checkbox" name="inputCheck" value="Mango" />Mango<br />
<input type="checkbox" name="inputCheck" value="Banana" />Banana<br />
<input type="checkbox" name="inputCheck" value="Orange" />Orange<br />
<p><input type="submit" id="submitBtn" value="submit" onclick="printChecked()"/></p>
</form>
<script type="text/javascript">
function printChecked() {
var items = document.getElementsByName("inputCheck");
var arr=[];
for (var i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].checked == true){
arr.push(items[i].value);
}
}
localStorage.setItem("ddvalue", arr);
document.write("Submitted Successfully. <br> To see the result, please run the Page2.html")
return true;
}
</script>
</body>
</html>
page2.html
<html>
<head>
<title>Print checked button values on another page- JavaScript.</title>
</head>
<body>
<h1>Page2</h1>
<hr/>
The Selected course is: <b><span id="result"></span></b>
<script>
var arr=localStorage.getItem("ddvalue");
arr=arr.split(",");
var selectedItems = "";
for (var i = 0; i < arr.length; i++) {
selectedItems += "<br>" + arr[i] ;
}
document.getElementById("result").innerHTML= selectedItems;
</script>
</body>
</html>
From the output, you can observe that on the first page page1.html all the items are displayed and when the user will select items from the checked list then it will add all the selected values to the storage with the key name as value. When the user presses the submit button it will redirect him to the next page which is page2.html. on page 2 the program will take out the selected values by the user from the storage using the key value and by looping through the array it will append and print the final value.
4K+ Views
