sessionStorage saves input value in browser but it is not loaded in the form field

I am trying to save the input value of form fields but only one of the fields returns the value on page refresh. I can see the input value of the second field in sessionStorage in chrome but it is not loaded to the form field after refresh.

Additionally, I am unable to get the select field to work with sessionStorage. When the JavaScript code runs, the select field becomes disabled.

Please note that the else statement in my js code is there to prevent the fields from showing “undefined” when the fields are empty.

Kindly review my code and tell me what I am doing wrong. I am trying to do this for the custom fields I have in woocommerce checkout page.

Js code:

// Run on page load
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’).innerHTML = quote_price_input;
} else
document.getElementById(‘quote_price_input’).innerHTML = “”;

if(select_price_option !== null) {
document.getElementById(‘select_price_option’).innerHTML = select_price_option;
}else
document.getElementById(‘select_price_option’).innerHTML = “”;

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());
}
};
})(jQuery);

HTML CODE BELOW:

<p class=”form-row form-row-wide”>
<label for=”quote_price_input”>Enter amount</label>
<input type=”text” id=”quote_price_input_sign” value=”₦” disabled/>
<input type=”number” name=”quote_price_input” id=”quote_price_input” class=”input-text”/>
</p>

<p class=”form-row form-row-wide”>
<select name=”select_price_option” id=”select_price_option” />
<option disabled selected value> Select a type</option>
<option>Total</option>
<option>Starting fee</option>
<option>Others</option>
<option>I need more info</option>
</select>
</p>

<p class=”form-row form-row-wide”>
<label for=”message_to_customer”>Enter your message<span class=”required”> *</span></label>
<textarea name=”message_to_customer” id=”message_to_customer” class=”input-text”></textarea>
<span class=”description” id=”message-to-customer-description”><a href=”#” class=”body-text”>Tips</a>.</span>
</p>

Read more here:: sessionStorage saves input value in browser but it is not loaded in the form field

Leave a Reply

Your email address will not be published. Required fields are marked *