Form Handling using JavaScript
Accessing user input in a textbox using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting input from a textbox in JavaScript</title>
</head>
<body>
<form action="#" onsubmit="return validate()">
<label for="username">Username</label>
<input type="text" required name="username" id="username">
<input type="submit" value="Submit">
<div id="msg"></div>
<script>
function validate()
{
let uname = document.getElementById("username").value;
if(uname.trim().length==0)
{
document.getElementById("msg").innerHTML="Enter a valid name";
return false;
}
return true;
}
</script>
</form>
</body>
</html> Output
Accessing user input using radio options in JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage to get and display profile Info</title>
</head>
<body>
<form action="profile.php" method="post" onsubmit="return validate();">
<label for="gender">Select your Gender</label><br>
<input type="radio" name="gender" value="Female">Female<br>
<input type="radio" name="gender" value="Male">Male<br>
<br>
<input type="submit" value="Submit" name="submit">
<label for="msg" id="msg"></label>
<script>
function validate()
{
let gender = document.getElementsByName("gender");
let found = false;
for(let i of gender)
{
if(i.checked)
{
document.getElementById("msg").innerHTML = i.value;
found=true;
return false; //just to stay on the webpage returned false
}
}
if(!found)
{
document.getElementById("msg").innerHTML = "Select your Gender";
return false;
}
}
</script>
</form>
</body>
</html> Output
Acessing checkbox input from a form using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Option Validation and Input Demo</title>
</head>
<body>
<form action="profile.php" method="post" onsubmit="return validate();">
<label for="subjects">Select your subjects</label><br>
<input type="checkbox" class="checkbox" name="sub[]" value="chemistry">Chemistry<br>
<input type="checkbox" class="checkbox" name="sub[]" value="physics">Physics<br>
<input type="checkbox" class="checkbox" name="sub[]" value="English">English<br>
<br>
<input type="submit" value="Submit" name="submit">
<label for="msg" id="msg"></label>
<script>
function validate()
{
let subjects = document.getElementsByClassName("checkbox");
let found =false;
for(let i of subjects)
{
if(i.checked)
{
document.getElementById("msg").innerHTML += i.value;
found=true;
}
}
if(!found)
{
document.getElementById("msg").innerHTML = "Select your Subjects";
return false;
}
return false;
}
</script>
</form>
</body>
</html> Output
Accessing Select input from a form using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Validation and Input Demo</title>
</head>
<body>
<form action="profile.php" method="post" onsubmit="return validate();">
<label for="country">Select your country</label><br>
<select name="country" id="country" required>
<option disabled selected value> -- select an option -- </option>
<option value="US">United States</option>
<option value="India">India</option>
<option value="Germany">Germany</option>
</select>
<br>
<input type="submit" value="Submit" name="submit">
<label for="msg" id="msg"></label>
<script>
function validate()
{
let country = document.getElementById("country").value;
document.getElementById("msg").innerHTML=country;
return false;
}
</script>
</form>
</body>
</html>Output
Accessing the date input from a form in Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form handling using JavaScript</title>
</head>
<body>
<form action="exercise.html" method="post" onsubmit="return validate();">
<label for="subjects">Select your Join Date</label> <br>
<input type="date" name="joindate" id="joindate">
<input type="submit" name="submit" value="Submit">
<label for="msg" id="msg"></label>
<script>
function validate()
{
const joindate = document.getElementById("joindate").value;
const d = new Date(joindate);
document.write(d.getFullYear());
document.write(d.getDate());
return true;
}
</script>
</form>
</body>
</html>
Output
