Question

In: Computer Science

Create a webpage with HTML and JAVA Script that takes a user's 4 inputs (first name,...

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.

Solutions

Expert Solution

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>

venereology answered 2 months ago
Next > < Previous

Related Solutions

Create following webpage in HTML : 1. Login Page This is the first page the user...
Create following webpage in HTML : 1. Login Page This is the first page the user should see. The user can login, signup, or continue as a guest. Your task is to implement the following features: a) Signup form This form should collect the information required for creating a new account on your movie database website. At the least, it should collect an email address, username, avatar image/graphic, first name, last name, and a password. You can ask for more...
Create a form with two inputs name and roll number.And write a script to validate the...
Create a form with two inputs name and roll number.And write a script to validate the inputs.Any of them should not be empty. Name will be string and roll number will be number between 1 -10 only
Name the script thirsty.sh. Ask the user if they are thirsty. Read the user's response. If...
Name the script thirsty.sh. Ask the user if they are thirsty. Read the user's response. If they answer no or No, print an appropriate message and exit. If they answer yes or Yes, ask what they would like to drink. Read the user's response. If they answer water print "Clear crisp and refreshing." If they answer beer print "Let me see some id." If they answer wine print "one box or two." If they answer anything else print "Coming right...
JAVA Program Create a class called SoccerPlayer Create 4 private attributes: First Name, Last Name, Games,...
JAVA Program Create a class called SoccerPlayer Create 4 private attributes: First Name, Last Name, Games, and Goals Have two constructors Constructor 1 – default constructor; all values to "NONE" or zero Constructor 2 – accepts input of first name, last name, games and goals. Create get and set methods for each of the four attributes Create a method the returns a double that calculates the average goals per game This method checks for zero games played: If there are...
java script Define a function named height which has two inputs. This first input is the...
java script Define a function named height which has two inputs. This first input is the number of feet. The second input is the number of inches. Both inputs will be Number values. Your function must calculate and return a Number. he returned value represents number of meters equal to the input. Your function should start by multiplying the first parameter by 0.3048 (1 foot is 0.3048 meters). Then multiply the second input by 0.0254 (1 inch is 0.0254 meters)....
Nice shirt! In Java, write a program that uses a function that takes in the user's...
Nice shirt! In Java, write a program that uses a function that takes in the user's name and prints out compliments directed to them. The program should provide a sentinel value by asking if they've had enough compliments and will continue until they type "yes". Include 3 different compliments pulled at random and BE SURE TO USE A FUNCTION/METHOD to take in the user's name. Sample output: Enter your name: John Smith John Smith, you have a great smile! Would...
Write a script called script2-4.py that takes a person's delivery order as inputs, totals all the...
Write a script called script2-4.py that takes a person's delivery order as inputs, totals all the items and calculates the tax due and the total due. The number of inputs is not known. You can assume that the input is always valid. (i.e no negative numbers or string like "cat"). Use a loop that takes the prices of items as parameters that are floats, counts the number of items, and sums them to find the total. You must also use...
Write a script called script2-4.py that takes a person's delivery order as inputs, totals all the...
Write a script called script2-4.py that takes a person's delivery order as inputs, totals all the items and calculates the tax due and the total due. The number of inputs is not known. You can assume that the input is always valid. (i.e no negative numbers or string like "cat"). Use a loop that takes the prices of items as parameters that are floats, counts the number of items, and sums them to find the total. You must also use...
Write a script called script2-4.py that takes a person's delivery order as inputs, totals all the...
Write a script called script2-4.py that takes a person's delivery order as inputs, totals all the items and calculates the tax due and the total due. The number of inputs is not known. You can assume that the input is always valid. (i.e no negative numbers or string like "cat"). Use a loop that takes the prices of items as parameters that are floats, counts the number of items, and sums them to find the total. You must also use...
C++ Read first a user's given name followed by the user's age from standard input. Then...
C++ Read first a user's given name followed by the user's age from standard input. Then use an ofstream object named outdata (which you must declare) to write this information separated by a space into a file called outdata. Assume that this is the extent of the output that this program will do. Declare any variables that you need.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT