Form data lost when change is input
I use on online reservation system which is hosted on my website. The portal is www.mauitradewinds.com/RezEasy/rezeasy.html When a guest is in the process of making a reservation, contact details are filled into a form (checkout.html). Then the guest may submit the form or else make changes before submitting. If they modify their reservation (cf0001.html) and save changes, they should be returned to the checkout page, still fully populated with their contact details. However, when I test this, the contact details have been lost and the form is blank. The reservation can't be submitted without filling in the entire form again. Is this only happening on my computer? If it is happening generally, is there a way to preserve the details on the checkout page so a user doesn't need to fill them in again after saving a change?
ASKER
Thank you for your comment. Firs the user completes a booking form with details about their reservation. Then they are transferred to a checkout page, where they enter contact information. If the user completes and submits the checkout form, they are transferred to a secure server, and their details are preserved. But if they complete the checkout form and -- instead of submitting it -- they use a button to modify their reservation details, then the checkout form is presented again for the user to submit. It is supposed to retain the data which was populated originally, but now I see it does not retain it.
The button that is pressed which triggers the form reloading. Does that reload the page? Is the button a browser back button? Or reset button (that is mislabeled)? Or does a function redirect the page when clicked?
If its a modify button that takes the user back and make changes - then consider:
1. passing the values through querystring
2. save values in session on the server
3. save using cookies.
Its possible a user has cookies disabled. And its possible Javascript could be disabled. My thoughts on that are - cant worry about everyone (im sure to get challenged).
Cookies: http://www.hunlock.com/blogs/Cookie_Monsters_Inc
QueryString: http://ilovethecode.com/Javascript/Javascript-Tutorials-How_To-Easy/Get_Query_String_Using_Javascript.shtml
Does this help at all?
If its a modify button that takes the user back and make changes - then consider:
1. passing the values through querystring
2. save values in session on the server
3. save using cookies.
Its possible a user has cookies disabled. And its possible Javascript could be disabled. My thoughts on that are - cant worry about everyone (im sure to get challenged).
Cookies: http://www.hunlock.com/blogs/Cookie_Monsters_Inc
QueryString: http://ilovethecode.com/Javascript/Javascript-Tutorials-How_To-Easy/Get_Query_String_Using_Javascript.shtml
Does this help at all?
ASKER
Thank you for your comment. I believe (but am not certain) that the form page is re-loaded in a frame. I've attached the page which holds forms (rezeasy.html) along with the form which is reload (checkout.html) and the page where changes are made (cf0001.html). Can you tell me which mechanism is used to trigger the form reloading, so I can pick the appropriate solution? checkout.html cf0001.html rezeasy.html You could also visit www.mauitradewinds.com/RezEasy/rezeasy.html and experience the process. You don't have to submit a booking to see what happens with the form details.
To what i can gather, it appears the rezeasy javascript uses cookies for the calculator. So i think cookies would be a good option as well. My approach:
If your task is to save the address information in the event:
1. a user modifies the booking information
2. leaves the page before checkout process is complete
i would suggest:
Save address information to cookie on page using "onunload" method of window object. The page would be the checkout.html page where address info is taken.
What do you think? This can be accomplished by:
1. Adding a method to onunload.
The method applied to onunload would retrieve all form data, save into a cookie
2. Add a method to the onload event.
This method would populate the values of the form at page load.
What are your thoughts? Seem reasonable? I believe this solution is viable.
Another question for you; is the rezeasy code supposed to save address info for you? I see that he uses the onload and onunload in the frameset.
onunload="checkAndSave();"
If your task is to save the address information in the event:
1. a user modifies the booking information
2. leaves the page before checkout process is complete
i would suggest:
Save address information to cookie on page using "onunload" method of window object. The page would be the checkout.html page where address info is taken.
What do you think? This can be accomplished by:
1. Adding a method to onunload.
The method applied to onunload would retrieve all form data, save into a cookie
2. Add a method to the onload event.
This method would populate the values of the form at page load.
What are your thoughts? Seem reasonable? I believe this solution is viable.
Another question for you; is the rezeasy code supposed to save address info for you? I see that he uses the onload and onunload in the frameset.
onunload="checkAndSave();"
sorry i ask your thoughts so many times. i have jumbled brain.
ASKER
Hi Gregg: Thank you for your testing and conclusions. I would like to implement your recommendation. However, I'll need very specific guidance. Are you willing to create a modified rezeasy page with the recommended code?
I saw the "check and save" and "salvagedetails" terms in the rezeasy.html frameset, but I don't which details are the object of that. If I ventured a guess, I would say it is the booking details, because those are saved or updated when a user confirms or modifies a booking. It's the contact information which is lost.
I saw the "check and save" and "salvagedetails" terms in the rezeasy.html frameset, but I don't which details are the object of that. If I ventured a guess, I would say it is the booking details, because those are saved or updated when a user confirms or modifies a booking. It's the contact information which is lost.
working on it now. It may be tomorrow before i get to you. I will try to get done quickly.
ASKER
Wonderful!
Give this a try. I will help to fix bugs - i imagine there might be some. If not, it wasnt designed by me. [encouraging right!] :-D
Will you please backup the checkout.html file first. I hope my code doesnt interfere with the original authors code. Code is simple, it simply is storing the contact information into a cookie for 21 days. This is triggered when the page is unloaded. And when page reloads, if the cookie exists, data is populated into form fields.
The changes i made:
1. I removed the "selected" attribute from the Country combobox. It will default to "Select Country" anyway since it is first in the list.
2. I removed the pushAddress method from <BODY> tag. I added the pushAddress method to the onload event in mtSaveAddress.js file. The onload method i created is now taking over the onload event of this page.
3. I added id attributes to each form field. ex:
mtSaveAddress.js
Will you please backup the checkout.html file first. I hope my code doesnt interfere with the original authors code. Code is simple, it simply is storing the contact information into a cookie for 21 days. This is triggered when the page is unloaded. And when page reloads, if the cookie exists, data is populated into form fields.
The changes i made:
1. I removed the "selected" attribute from the Country combobox. It will default to "Select Country" anyway since it is first in the list.
<SELECT NAME=Country SELECTED>
is now
<SELECT id="Country" NAME=Country>2. I removed the pushAddress method from <BODY> tag. I added the pushAddress method to the onload event in mtSaveAddress.js file. The onload method i created is now taking over the onload event of this page.
<BODY onload="parent.pushAddress()">
is now
<BODY>3. I added id attributes to each form field. ex:
<INPUT id="FirstName" TYPE=text ...other stuff... >mtSaveAddress.js
ASKER
Thank you for your excellent creative work. If you have a "jumbled brain" I wish mine were jumbled! The new checkout page performs perfectly on my local drive, and user contact information is repopulated into the checkout form after confirming or modifying a booking. If I fill out the form with different contact information, the most recent version is preserved. But the form on the server does not retain contact information. Please have a look at the online system and let me know what you think.
Note: the contact.html page which you created would not load initially. I copied its contents with a plain text editor, and replaced the contents of the old form (after making a backup) and then it worked. Maybe a file format issue, but not important.
Note: the contact.html page which you created would not load initially. I copied its contents with a plain text editor, and replaced the contents of the old form (after making a backup) and then it worked. Maybe a file format issue, but not important.
yes interesting. i am looking and hope to have solution shortly.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Very good. I made that change.
ASKER
Looks like it works! I don't know how that last change made the difference. In any case, you're very generous with your time and expertise, and the result is great.
I also am learning and with what little i know - it makes me happy to share with others. This is what i enjoy - The kind words are appreciated!
As for the last change, I expect the javascript terminates at the error. I didnt include any error trapping. And since it did not trap the reference to an invalid form element, it did not continue in script. Im happy to hear it was a simple fix.
:) Gregg
As for the last change, I expect the javascript terminates at the error. I didnt include any error trapping. And since it did not trap the reference to an invalid form element, it did not continue in script. Im happy to hear it was a simple fix.
:) Gregg
ASKER
Gregg's solution has worked perfectly for years. Now I have upgraded the reservation system software, and mtsaveaddress.js no longer repopulates form fields when a page is reloaded. I posted a question, asking for assistance in adapting the script to the new software version:
https://www.experts-exchange.com/questions/28394012/Re-populating-form-fields-when-a-page-reloads.html
https://www.experts-exchange.com/questions/28394012/Re-populating-form-fields-when-a-page-reloads.html
Do i understand correctly that the process is when a user fills out the form, they are then transferred to the checkout page? If that is case, you will need to take the form field data with you from previous to next page.