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>
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>
1 Answer
Reset to default 0You 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());
}
}