<asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("name") %>'
NavigateUrl='<%# "~/news/" + Eval("filen") %>' ForeColor="Wheat"> </asp:HyperLink>
<asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("name") %>'
NavigateUrl='<%# "~/news/" + Eval("filen") %>' ForeColor="Wheat"> </asp:HyperLink>
WEB CONFIG FILE
<?xml version="1.0"?>
<configuration>
<system.web>
<httpRuntime maxRequestLength="1048576" executionTimeout="999999"/>
<customErrors mode="Off"></customErrors>
<compilation debug="true" targetFramework="4.0"/>
</system.web>
</configuration>
Folder Code
protected void Button1_Click(object sender, EventArgs e)
{
//file upload
FileUpload1.SaveAs(Server.MapPath(@"~/nsadmin/") + "//news//" + FileUpload1.FileName);
Label1.Text = "File upload successfully please click save button to save record";
}
<asp:GridView ID="GridView1" runat="server"
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h2>Student Information</h2>
<label>Enter Name:</label>
<input type="text" id="txtName">
<br><br>
<button onclick="sendData()">Next Page</button>
<script>
function sendData() {
var name = document.getElementById("txtName").value;
// Save data in Local Storage
localStorage.setItem("StudentName", name);
// Open second page
window.location.href = "result.html";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h2>Student Details</h2>
<p>
Name :
<span id="displayName"></span>
</p>
<script>
// Get data from Local Storage
var name = localStorage.getItem("StudentName");
// Display data
document.getElementById("displayName").innerHTML = name;
</script>
</body>
</html>
Student Information
Enter Name: [Nilesh Gupta]
[Next Page]
⬇️ Click Next Page
Student Details
Name : Nilesh Gupta
JavaScript stores the value using:
localStorage.setItem("StudentName", name);
The second page retrieves the value:
localStorage.getItem("StudentName");
This is one of the simplest ways to transfer data between HTML pages using only JavaScript, without any server-side code or database.
localStorage in JavaScript?localStorage is a built-in JavaScript object that allows you to store data in the user's web browser as key-value pairs. The stored data remains available even after the browser is closed and reopened, until it is manually deleted or cleared.
localStoragelocalStorage.setItem("key", "value");
var value = localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();
<!DOCTYPE html>
<html>
<head>
<title>LocalStorage Example</title>
</head>
<body>
<input type="text" id="txtName" placeholder="Enter Name">
<button onclick="saveData()">Save</button>
<script>
function saveData() {
var name = document.getElementById("txtName").value;
localStorage.setItem("StudentName", name);
alert("Data Saved Successfully");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Display Data</title>
</head>
<body>
<h2>Stored Name</h2>
<p id="result"></p>
<script>
var name = localStorage.getItem("StudentName");
document.getElementById("result").innerHTML = name;
</script>
</body>
</html>
localStorage.removeItem("StudentName");
localStorage.clear();
Enter Name : Nilesh Gupta
[Save]
Stored Name
Nilesh Gupta
localStorage Methods| Method | Description |
|---|---|
setItem(key, value) | Stores data |
getItem(key) | Retrieves stored data |
removeItem(key) | Removes a specific item |
clear() | Removes all stored data |
key(index) | Returns the key at the given index |
length | Returns the number of stored items |
JSON.stringify() and JSON.parse()).
localStorage is commonly used in front-end web applications to save small amounts of data locally without requiring a server or database.
This example allows the user to select a gender using radio buttons and displays the selected value when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Radio Button Example</title>
<script>
function showResult() {
var gender = "";
if (document.getElementById("male").checked) {
gender = "Male";
}
else if (document.getElementById("female").checked) {
gender = "Female";
}
else if (document.getElementById("other").checked) {
gender = "Other";
}
else {
gender = "Please select a gender.";
}
document.getElementById("result").innerHTML = gender;
}
</script>
</head>
<body>
<h2>JavaScript Radio Button Example</h2>
<input type="radio" id="male" name="gender"> Male <br><br>
<input type="radio" id="female" name="gender"> Female <br><br>
<input type="radio" id="other" name="gender"> Other <br><br>
<button onclick="showResult()">Show Result</button>
<h3>Selected Gender:</h3>
<p id="result"></p>
</body>
</html>
( ) Male
( ) Female
( ) Other
[ Show Result ]
If the user selects Male:
Selected Gender:
Male
If the user selects Female:
Selected Gender:
Female
If no option is selected:
Selected Gender:
Please select a gender.
input type="radio" creates a radio button.
name belong to the same group.
.checked returns true if a radio button is selected.
document.getElementById() accesses an HTML element by its ID.
.innerHTML displays the selected value in the page.
This is a simple and beginner-friendly JavaScript radio button example suitable for students learning HTML and JavaScript.
Here's a simple JavaScript Checkbox Example with output.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox Example</title>
</head>
<body>
<h2>Checkbox Example</h2>
<input type="checkbox" id="chkAgree"> I Agree to the Terms & Conditions
<br><br>
<button onclick="checkStatus()">Submit</button>
<p id="result"></p>
<script>
function checkStatus() {
var checkbox = document.getElementById("chkAgree");
if (checkbox.checked) {
document.getElementById("result").innerHTML =
"✅ Checkbox is Checked.";
}
else {
document.getElementById("result").innerHTML =
"❌ Checkbox is Not Checked.";
}
}
</script>
</body>
</html>
Case 1: Checkbox Checked
✅ Checkbox is Checked.
Case 2: Checkbox Not Checked
❌ Checkbox is Not Checked.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Checkbox Example</title>
</head>
<body>
<h2>Select Your Skills</h2>
<input type="checkbox" id="html"> HTML <br>
<input type="checkbox" id="css"> CSS <br>
<input type="checkbox" id="js"> JavaScript <br><br>
<button onclick="showSkills()">Show Selected Skills</button>
<p id="output"></p>
<script>
function showSkills() {
var result = "";
if(document.getElementById("html").checked)
result += "HTML ";
if(document.getElementById("css").checked)
result += "CSS ";
if(document.getElementById("js").checked)
result += "JavaScript ";
if(result == "")
result = "No Skill Selected";
document.getElementById("output").innerHTML = result;
}
</script>
</body>
</html>
If HTML and JavaScript are selected:
HTML JavaScript
If no checkbox is selected:
No Skill Selected
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Validation</title>
</head>
<body>
<input type="checkbox" id="terms">
I accept the Terms & Conditions
<br><br>
<button onclick="validateForm()">Register</button>
<script>
function validateForm() {
if(document.getElementById("terms").checked)
{
alert("Registration Successful");
}
else
{
alert("Please accept the Terms & Conditions.");
}
}
</script>
</body>
</html>
| Checkbox Status | Output |
|---|---|
| ✔ Checked | Registration Successful |
| ✘ Not Checked | Please accept the Terms & Conditions. |
These examples are suitable for beginners learning JavaScript and demonstrate how to read a checkbox's checked property, work with multiple checkboxes, and validate user input.
<asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("name") %>' NavigateUrl='...