In: Computer Science
Create a webpage with HTML and JAVA Script that takes a user's 4 inputs (first name, last name, phone number, and sex[using checkbox, must set on load and change whenever the checkbox is selected, only 1 box can be selected, selecting the other automatically deselects the latter])
The first button saves all the inputs into LOCAL STORAGE
The Second button retrieves all the data in LOCAL STORAGE and displays them on the same page. Alert box to inform the user the button was selected.
The third button to clear the sex designation key/value pair in LOCAL STORAGE. Alert Box to inform the use the button was selected.
The webpage with HTML, in which page will open with firstname, lastname, phone number, sex with three buttons which store the data, retrieve the data and clear the sex designation, here the code:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<label for="phone">Mobile Number:</label><br>
<input type="tel" id="phone" name="phone"><br><be>
<label for="phone">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><be>
<input type="submit" value="store">
<input type="submit" value="retrieve">
<input type="submit" value="clear">
</form>
</body>
</html>
The output of the page, look like:
To store the data on local storage, display the data on same page & clear the gender, javascript can be used.
function storedata()
{
sessionStorage.setItem('fi', document.getElementId('fname').value);
sessionStorage.setItem('la', document.getElementId('lname').value);
sessionStorage.setItem('mo', document.getElementId('phone').value);
}
function getdata()
{
document.getElementById('span1').innerHTML=session.Storage.getItem('fi');
document.getElementById('span1').innerHTML=session.Storage.getItem('la');
document.getElementById('span1').innerHTML=session.Storage.getItem('mo');
}
function sex() {
document.getElementById("gender").reset();
}
The three function define the three buttons operations, here the final code of wepage:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function storedata()
{
sessionStorage.setItem('fi', document.getElementId('fname').value);
sessionStorage.setItem('la', document.getElementId('lname').value);
sessionStorage.setItem('mo', document.getElementId('phone').value);
}
function getdata()
{
document.getElementById('span1').innerHTML=session.Storage.getItem('fi');
document.getElementById('span1').innerHTML=session.Storage.getItem('la');
document.getElementById('span1').innerHTML=session.Storage.getItem('mo');
}
function sex() {
document.getElementById("gender").reset();
}
</script>
</head>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<label for="phone">Mobile Number:</label><br>
<input type="tel" id="phone" name="phone"><br><be>
<div id="gender">
<label for="phone">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><be>
</div>
<input type="submit" onclick="storedata();" value="store">
<input type="submit" onclick="getdata()" value="retrieve">
<span id="span1"></span>
<input type="submit" onclick="sex()" value="clear">
</form>
</body>
</html>