Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Display selected checkboxes on another page using JavaScript?
In this article, you will learn how to pass selected checkbox values from one page to another using JavaScript and localStorage. Checkboxes allow users to select multiple values, unlike radio buttons which only allow single selection. When a checkbox is checked, it represents a "true" value indicating user selection.
Basic Checkbox Example
<html>
<body>
<input type="checkbox" value="example" onchange="alert('Checkbox toggled!')"/>
Example checkbox
</body>
</html>
This creates a simple checkbox that shows an alert when clicked.
Getting Checkbox Values on Same Page
First, let's see how to collect checked values within the same page:
<html>
<body>
<form>
<h3>Select your favorite fruits:</h3>
<input type="checkbox" name="fruits" value="Apple" />Apple<br />
<input type="checkbox" name="fruits" value="Mango" />Mango<br />
<input type="checkbox" name="fruits" value="Banana" />Banana<br />
<input type="checkbox" name="fruits" value="Orange" />Orange<br />
<button type="button" onclick="showSelected()">Show Selected</button>
</form>
<script>
function showSelected() {
var checkboxes = document.getElementsByName("fruits");
var selected = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selected.push(checkboxes[i].value);
}
}
alert("Selected: " + selected.join(", "));
}
</script>
</body>
</html>
Using localStorage for Cross-Page Data Transfer
localStorage allows storing data in the browser that persists across page navigation. It provides 5MB of storage space and works synchronously. Here are the key methods:
| Method | Description | Example |
|---|---|---|
| setItem(key, value) | Store data | localStorage.setItem("name", "John") |
| getItem(key) | Retrieve data | localStorage.getItem("name") |
| removeItem(key) | Remove specific item | localStorage.removeItem("name") |
| clear() | Clear all data | localStorage.clear() |
Checking Browser Compatibility
<html>
<body>
<script>
if (typeof(Storage) !== "undefined") {
document.write("Your browser supports localStorage.");
} else {
document.write("Your browser doesn't support localStorage.");
}
</script>
</body>
</html>
Complete Example: Page 1 (Data Collection)
<!-- page1.html -->
<html>
<body>
<form action="page2.html">
<h2>Page 1 - Select Your Preferences</h2>
<h3>Choose your favorite fruits:</h3>
<input type="checkbox" name="fruits" value="Apple" />Apple<br />
<input type="checkbox" name="fruits" value="Mango" />Mango<br />
<input type="checkbox" name="fruits" value="Banana" />Banana<br />
<input type="checkbox" name="fruits" value="Orange" />Orange<br /><br />
<input type="submit" value="Submit" onclick="saveSelections()" />
</form>
<script>
function saveSelections() {
var checkboxes = document.getElementsByName("fruits");
var selected = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selected.push(checkboxes[i].value);
}
}
// Convert array to string for localStorage
localStorage.setItem("selectedFruits", JSON.stringify(selected));
return true;
}
</script>
</body>
</html>
Complete Example: Page 2 (Data Display)
<!-- page2.html -->
<html>
<body>
<h2>Page 2 - Your Selections</h2>
<p>You selected: <span id="results"></span></p>
<script>
// Retrieve and display selected values
var savedData = localStorage.getItem("selectedFruits");
if (savedData) {
var selectedArray = JSON.parse(savedData);
var displayText = selectedArray.length > 0 ? selectedArray.join(", ") : "None";
document.getElementById("results").innerHTML = displayText;
} else {
document.getElementById("results").innerHTML = "No selections found";
}
</script>
</body>
</html>
How It Works
The process involves three main steps:
- Collection: JavaScript loops through checkboxes and identifies checked ones
- Storage: Selected values are converted to JSON string and stored in localStorage
- Retrieval: The second page retrieves the JSON string, parses it back to an array, and displays the results
Key Points
Use
JSON.stringify()andJSON.parse()to handle arrays in localStoragelocalStorage data persists until manually cleared or browser data is deleted
Always check if data exists before trying to parse it
localStorage is limited to 5MB and only stores strings
Conclusion
Using localStorage with JSON methods provides an effective way to pass checkbox selections between pages. This approach maintains data integrity and offers a seamless user experience across page navigation.
4K+ Views
