我试图保存表单字段的输入值，但只有一个字段在页面刷新时返回值。我可以在chrome的sessionStorage中看到第二个字段的输入值，但刷新后它不会加载到表单字段。
此外，我无法将select字段用于sessionStorage。当JavaScript代码运行时，选择字段将被禁用。
请注意，我的js代码中的else语句是为了防止字段为空时显示“未定义”。
请检查我的代码，并告诉我我做错了什么。我正在尝试对woocommerce签出页面中的自定义字段执行此操作。
Js代码：
// 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代码如下：
<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>
最合适的回答,由SO网友:Karun 整理而成
你正在使用innerHTML 对于每个字段。
输入字段不应使用.innerHTML 使用.value 取而代之的是select 您应该循环使用不使用的选项.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());
}
}
