0

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>
0

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());
    }
}
|improve this answer|||||
  • Your code works for me, thank you. A few things to note. When I added the code to my js file, I get this notice "Assignment in conditional expression" on the line that has for (var opt, j = 0; opt = opts[j]; j++) { . Also, when I am on a checkout page that doesn't have the custom fields, I get this error in console Uncaught TypeError: Cannot set property 'value' of null at window.onload and when I click on the error, I see it's on this line document.getElementById('quote_price_input').value = quote_price_input; . I am not sure if this is an issue but I thought you should know. – Sadiq11111 Apr 5 '19 at 8:59
  • You can edit and fix :) – Karun Apr 5 '19 at 9:02
  • Hello Karun, I would if I could. Truth is I am just getting familiar with coding and I merely copy and try to study the codes I see online. I would highly appreciate if you can tell me what's causing it or maybe edit the answer. – Sadiq11111 Apr 5 '19 at 10:15
  • I'm not sure if this is right but I changed for (var opt, j = 0; opt = opts[j]; j++) { to for (var opt, j = 0; opt === opts[j]; j++) { and the "Assignment in conditional expression" error went away. Is that right? And do you know why I'm getting Uncaught TypeError: Cannot set property 'value' of null at window.onload on a checkout page that doesn't have the custom fields? – Sadiq11111 Apr 5 '19 at 10:25
  • 1
    @Sadiq11111 You can ignore that warning. It's okay. – Karun Apr 10 '19 at 5:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.