Wordpress empties form fields when refresh page

Wordpress WooCommerce When you fill in form field data and for whatever reason you need to refresh the page, you loose all of your form field data.  Is there anyway to override the Core Wordpress Functionality to reload empty fields?

I tried something like this:
    window.onload = function() {



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

     

        var message= sessionStorage.getItem('message');
        $('#order_comments').val(message);
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("firstName", $('#billing_first_name').val());
        sessionStorage.setItem("message", $('#order_comments').val());
    }

Open in new window


Go here and pick either product: http://slideswizard.fireflie.webfactional(DOT)com/pricing/

Go to the checkout page fill in billing or customer notes and then upload a file.  It will clear the form field Data
LVL 8
rgranlundAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Andrei FilonovWeb Developer / OwnerCommented:
There is an error message in the console:

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

Open in new window


Basically this will kill your calls to store / load session data.

Solution: replace $ with jQuery, e.g.

window.onload = function() {

        // If values are not blank, restore them to the fields
        var firstName = sessionStorage.getItem('firstName');
        jQuery('#billing_first_name').val(firstName);

        var message= sessionStorage.getItem('message');
        jQuery('#order_comments').val(message);
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("firstName", jQuery('#billing_first_name').val());
        sessionStorage.setItem("message", jQuery('#order_comments').val());
    }

Open in new window


P.S. Please never change WP core files :D
0
rgranlundAuthor Commented:
That did not work.

I basically need to store the Custom Message.  If you upload a file, once it has uploaded it clears the form, so any information that a customer enters into the form is lost.  It is a pain for the customer.
0
Andrei FilonovWeb Developer / OwnerCommented:
where exactly is your code located? Right now there is no event attached to window.onbeforeunload...
0
Andrei FilonovWeb Developer / OwnerCommented:
Basically problem is that plugin you use for the files upload seems to be forcing page reload after file is uploaded... Which is really not the best from the user experience point of view... I checked the code - and page reload code seems to be right there, so that's how plugin works.

You can try to work around that using session storage, but to be honest, this is "hack", not the proper solution...

Are there any other plugins for the same functionality available?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.