You are using innerHTML
for every field.
Input field shouldn’t be using .innerHTML
use .value
instead and for select
you should loop through the options not use .innerHTML
window.onload = function() {
var quote_price_input = sessionStorage.getItem("quote_price_input");
var message_to_customer = sessionStorage.getItem("message_to_customer");
var select_price_option = sessionStorage.getItem("select_price_option");
if(quote_price_input !== null) {
document.getElementById('quote_price_input').value = quote_price_input;
} else
document.getElementById('quote_price_input').value = "";
if(select_price_option !== null) {
var sel = document.getElementById('select_price_option');
var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
console.log(opt.innerHTML);
if (opt.innerHTML == select_price_option) {
sel.selectedIndex = j;
break;
}
}
}
if(message_to_customer !== null) {
document.getElementById('message_to_customer').innerHTML = message_to_customer;
} else
document.getElementById('message_to_customer').innerHTML = "";
};
// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
var quote_price_input = document.getElementById('quote_price_input');
var message_to_customer = document.getElementById('message_to_customer');
var select_price_option = document.getElementById('select_price_option');
if(quote_price_input !== null) {
sessionStorage.setItem('quote_price_input', $('#quote_price_input').val());
}
if(select_price_option !== null) {
sessionStorage.setItem('select_price_option', $('#select_price_option').val());
}
if(message_to_customer !== null) {
sessionStorage.setItem('message_to_customer', $('#message_to_customer').val());
}
}