使用会话存储将值保存在表单中

Question

Currently trying to use the following script to save the billing information i've included below on a page refresh. Hoping that this would clear up further errors i'm having down the line with redirecting users to paypal.

<script>
    // Run on page load
    window.onload = function() {

        // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
        if (sessionStorage.getItem('billing_firstname') == "billing_firstname") {
            return;
        }

        // If values are not blank, restore them to the fields
        var billing_firstname = sessionStorage.getItem('billing_firstname');
        if (billing_firstname !== null) $('#billing_firstname').val(billing_firstname);

        var billing_state= sessionStorage.getItem('billing_state');
        if (billing_state !== null) $('#billing_state').val(billing_state);

        var billing_country= sessionStorage.getItem('billing_country');
        if (billing_country!== null) $('#billing_country').val(billing_country);


    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("billing_firstname", $('#billing_firstname').val());
        sessionStorage.setItem("billing_state", $('#billing_state').val());
        sessionStorage.setItem("billing_country", $('#billing_country').val());

    }
</script>

To save the following form (not added all the form labels to the script yet)

<div id="billing_info" class="pad10 boxShadow" style="display:block"> 
          <!--START: SAVE_ADDRESSES-->
          <div class="chkField">
            <label for="save_address">[checkout3_PreviousAddresses]</label>
            <select type="dropdown" name="save_address" onchange="javascript:filladdress_form(this,'billing','billing');check_address('billing');" tabindex="1" class="txtBoxStyle">

              [address_billing_list]

            </select>
            <div class="clear"></div>
          </div>
          <!--END: SAVE_ADDRESSES-->
          <div class="chkField">
            <label for="billing_firstname">[CustomerInfo_firstname]</label>
            <input name="billing_firstname" onchange="clearContent(this);" type="text" id="billing_firstname" value="[billing_firstname]" size="15" tabindex="2" class="txtBoxStyle" />
            <!--START: req_billing_firstname--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_firstname-->
            <div class="clear"></div>
          </div>
          <div class="chkField">
            <label for="billing_lastname">[CustomerInfo_lastname]</label>
            <input name="billing_lastname" type="text" onchange="clearContent(this);" id="billing_lastname" value="[billing_lastname]" size="15" tabindex="3" class="txtBoxStyle" />
            <!--START: req_billing_lastname--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_lastname-->
            <div class="clear"></div>
          </div>






          <div class="chkField">
            <label for="billing_company">[CustomerInfo_company]</label>
            <input name="billing_company" type="text" onchange="clearContent(this);" id="billing_company" value="[billing_company]" size="25" tabindex="4" class="txtBoxStyle" />
            <div class="clear"></div>
          </div>

<div class="chkField">
            <label for="billing_state">[CustomerInfo_state]</label>
            <select id="billing_state" onchange="this.form.billing_zip.value='';check_address('billing');" name="billing_state" tabindex="9" class="txtBoxStyle">
            </select>
            <!--START: req_billing_state--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_state-->
            <div class="clear"></div>
          </div>



<div class="chkField">
            <label for="billing_country">[CustomerInfo_country]</label>
            <select name="billing_country" onchange="check_address('billing');" tabindex="8" class="txtBoxStyle" id="billing_country">
            </select>
            <!--START: req_billing_country--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_country-->
            <div class="clear"></div>
          </div>


          <div class="chkField">
            <label for="billing_address">[CustomerInfo_address]</label>
            <input name="billing_address" type="text" onchange="clearContent(this);[po_box_disabled_billing]" id="billing_address" value="[billing_address]" size="25" tabindex="5" class="txtBoxStyle" />
            <!--START: req_billing_address--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_address-->
            <div class="clear"></div>
          </div>
          <div class="chkField">
            <label for="billing_address2">[CustomerInfo_address2]</label>
            <input name="billing_address2" type="text" onchange="clearContent(this);" id="billing_address2" value="[billing_address2]" size="25" tabindex="6" class="txtBoxStyle" />
            <div class="clear"></div>
          </div>
          <div class="chkField">
            <label for="billing_city">[CustomerInfo_city]</label>
            <input name="billing_city" type="text" onchange="clearContent(this);" id="billing_city" value="[billing_city]" size="25" tabindex="7" class="txtBoxStyle" />
            <!--START: req_billing_city--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_city-->
            <div class="clear"></div>
          </div>


          <div class="chkField">
            <label for="billing_zip">[CustomerInfo_zip]</label>
            <input name="billing_zip" maxlength="15" type="text" id="billing_zip" value="[billing_zip]" size="10" tabindex="10" class="txtBoxStyle" onchange="clearContent(this);check_address('billing');" />
            <!--START: req_billing_zip--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_zip-->
            <div class="clear"></div>
          </div>

                  <div class="chkField">
            <label for="billing_phone">[CustomerInfo_phone]</label>
            <input name="billing_phone" type="text" onchange="clearContent(this);" id="billing_phone" value="[billing_phone]" size="25" tabindex="5" class="txtBoxStyle" />
            <!--START: req_billing_phone--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_phone-->
            <div class="clear"></div>
          </div>

        <div class="clear"></div>

I'm getting the following error.

Uncaught TypeError: $ is not a function
    at window.onbeforeunload

new error

Uncaught TypeError: $ is not a function
    at checkout_one.asp:1903
    at dispatch (jquery.min.js:2)
    at y.handle (jquery.min.js:2)

After adding

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I have not called the script from anywhere in my code as of yet.

Answer 1

<script>    

$( window ).load(function() {

    if (sessionStorage.getItem('billing_firstname') == "billing_firstname") 
    {
        return;
    }

    // If values are not blank, restore them to the fields
    var billing_firstname = sessionStorage.getItem('billing_firstname');
    if (billing_firstname !== null) $('#billing_firstname').val(billing_firstname);

    var billing_state= sessionStorage.getItem('billing_state');
    if (billing_state !== null) $('#billing_state').val(billing_state);

    var billing_country= sessionStorage.getItem('billing_country');
    if (billing_country!== null) $('#billing_country').val(billing_country);


}
});


 $( window ).unload(function() {

    sessionStorage.setItem("billing_firstname", 
    $('#billing_firstname').val());
    sessionStorage.setItem("billing_state", $('#billing_state').val());
    sessionStorage.setItem("billing_country", $('#billing_country').val());
});

</script>

and include jquery before any script library included or before this code ... first script should be jquery :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

and please post error after this since ur using jquery $(" ") without jquery i think you are mixing js and jquery in bad way . please check this once .