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
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;
}
Step by step
Solved in 4 steps with 2 images
