Hi, how to i read multiple user input from the form ,load it into session storage and show it ? the code belows only stores a single value(fname) Was thinking to use for loop but it doesnt work hmm. Hope you can help me thankss:))   html5-local-session-storage-example.html Session Storage With Example payment Enter your first name. Valid first name is required. Enter your last name. Valid last name is required. Enter your email. Enter your comment. Credit card Debit card PayPal Name on card Full name as displayed on card Name on card is required Credit card number Credit card number is required Expiration Expiration date required CVV Security code required html5-local-session-storage-example.js var KEY_INPUT_TEXT = "KEY_INPUT_TEXT";   var ID_OUTPUT_NOTES_LIST = "outputNotesList";   function saveToSession(inputTextId){   inputText = document.getElementById(inputTextId);   if(inputText==null){ alert('Can not find the Html input text element with the id ' + inputTextId); return; }   if(inputText.value.trim()==''){ alert('Please input your information!.'); return; }   sessionStorage.setItem(KEY_INPUT_TEXT, inputText.value);   alert('Save input text to session storage successfully.');   }   function loadFromSession(outputTextId){ outputText = document.getElementById(outputTextId); if(outputText==null){ alert('Can not find the Html output element with the id ' + outputTextId); return; } savedText = 'Text saved in session storage: ' + sessionStorage.getItem(KEY_INPUT_TEXT); var len = sessionStorage.length; for(var i=0;i

COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
1st Edition
ISBN:9780357392676
Author:FREUND, Steven
Publisher:FREUND, Steven
Chapter6: Creating, Sorting, And Querying A Table
Section: Chapter Questions
Problem 12AYK
icon
Related questions
Question

Hi, how to i read multiple user input from the form ,load it into session storage and show it ? the code belows only stores a single value(fname) Was thinking to use for loop but it doesnt work hmm. Hope you can help me thankss:))

 

html5-local-session-storage-example.html

<!DOCTYPE html>

<html>

<head>

<title> Session Storage With Example</title>

<script type="text/javascript" src="html5-local-session-storage-example.js" charset="utf-8"></script>

<style>

canvas{

display:inline-block;

margin-top:10px;

}

</style>

</head>

<body>

<h3>payment</h3>

<form id="js_form" method="post">

<div>

<label>Enter your first name.</label><br>

<input type="text" id="fname" placeholder="Enter your first name." >

<div class="invalid-feedback"> Valid first name is required. </div>

</div>

<div>

<label>Enter your last name.</label><br>

<input type="text" id="lname" placeholder="Enter your last name." >

<div class="invalid-feedback"> Valid last name is required. </div>

</div>

<div>

<label>Enter your email.</label><br>

<input type="email" id="email" placeholder="Enter your email." >

</div>

<div>

<label>Enter your comment.</label><br>

<textarea type="text" id="comment" placeholder="Enter your comment." ></textarea>

</div>

<div>

<input type="radio" id="credit" name="paymentMethod" value="Credit card" >

<label >Credit card</label>

</div>

<div >

<input type="radio" id="debit" name="paymentMethod" value="Debit card" >

<label >Debit card</label>

</div>

<div >

<input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required="">

<label >PayPal</label>

</div>

<div class="row">

<div class="col-md-6 mb-3">

<label for="cc-name">Name on card</label>

<input type="text" class="form-control" id="cc-name" placeholder="" required="">

<small class="text-muted">Full name as displayed on card</small>

<div class="invalid-feedback"> Name on card is required </div>

</div>

<div class="col-md-6 mb-3">

<label for="cc-number">Credit card number</label>

<input type="text" class="form-control" id="cc-number" placeholder="" required="">

<div class="invalid-feedback"> Credit card number is required </div>

</div>

</div>

<div class="row">

<div class="col-md-3 mb-3">

<label for="cc-expiration">Expiration</label>

<input type="text" class="form-control" id="cc-expiration" placeholder="" required="">

<div class="invalid-feedback"> Expiration date required </div>

</div>

<div class="col-md-3 mb-3">

<label for="cc-cvv">CVV</label>

<input type="text" class="form-control" id="cc-cvv" placeholder="" required="">

<div class="invalid-feedback"> Security code required </div>

</div>

</div>

<div>

<input type="button" id="submitBtn" value="Submit" onclick="saveToSession('fname')" />

<input type="button" id="ShowinfoBtn" value="Show payment information" onclick="loadFromSession('outputText')" />

</div>

<output id="outputText" style="display:block"></output>

</form>

html5-local-session-storage-example.js

var KEY_INPUT_TEXT = "KEY_INPUT_TEXT";

 

var ID_OUTPUT_NOTES_LIST = "outputNotesList";

 

function saveToSession(inputTextId){

 

inputText = document.getElementById(inputTextId);

 

if(inputText==null){

alert('Can not find the Html input text element with the id ' + inputTextId);

return;

}

 

if(inputText.value.trim()==''){

alert('Please input your information!.');

return;

}

 

sessionStorage.setItem(KEY_INPUT_TEXT, inputText.value);

 

alert('Save input text to session storage successfully.');

 

}

 

function loadFromSession(outputTextId){

outputText = document.getElementById(outputTextId);

if(outputText==null){

alert('Can not find the Html output element with the id ' + outputTextId);

return;

}

savedText = 'Text saved in session storage: ' + sessionStorage.getItem(KEY_INPUT_TEXT);

var len = sessionStorage.length;

for(var i=0;i<len;i++){

key = sessionStorage.key(i);

value = sessionStorage.getItem(key);

console.log('Key = ' + key);

console.log('Value = ' + value);

 

}

outputText.value = savedText;

}

Expert Solution
steps

Step by step

Solved in 4 steps with 2 images

Blurred answer
Knowledge Booster
Linux
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:
9780357392676
Author:
FREUND, Steven
Publisher:
CENGAGE L