I have a simple form as below. I am trying to store all the input values. I have been trying this as in the snippet but they are not stored.
I want to store the values of all inputs on search and want to use them for the next click of search even user hits the search with empty values or until the page refresh (possibly the former).
Any help or guiding links are much appreciated. TIA!
$(document).ready(function() {
$('#submit').on('click', function() {
var lengthValue = $("#wordlength").val();
var wordValue = $("#word").val().replace(/ /g, '-');
if (wordValue == '') {
wordValue = sessionStorage.getItem("data");
if (wordValue == null) {
wordValue = '';
}
}
var postionValue = $("#position").val();
var wordTypeValue = $("#wordtype").val();
var wordSearchValue = $("#mainword_search").val();
sessionStorage.setItem('wordtype', wordTypeValue);
if (wordTypeValue == '') {
wordTypeValue = sessionStorage.getItem('wordtype');
if (wordTypeValue == null) {
wordTypeValue = '';
}
}
sessionStorage.setItem('length', lengthValue);
if (lengthValue == '') {
lengthValue = sessionStorage.getItem('length');
if (lengthValue == null) {
lengthValue = '';
}
}
sessionStorage.setItem('position', postionValue);
if (postionValue == '') {
postionValue = sessionStorage.getItem('position');
if (postionValue == null) {
postionValue = '';
}
}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><input type="text" class="form-control" id="wordlength" placeholder="All" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"><select class="form-control" id="wordtype" name="wordtypesearch"><option value="">word</option><option value="old">old</option><option value="new">new</option></select><select class="form-control" id="position" name="positionsearch"><option value="containing">Containing</option><option value="starting">Starting With</option><option value="ending">Ending With</option></select><input type="text" class="form-control" id="word" placeholder="Text...."><input type="submit" value="Search" id="submit" class="submit px-3">