Re-populating form fields when a page reloads

A few years ago, an Expert designed a method for repopulating form fields in my online reservation system, when a page is reloaded.  Please see http://www.experts-exchange.com/Programming/Languages/Scripting/Q_27407186.html

This saves visitors the effort of filling in data when the return to a booking form, after making a change to their reservation.  The repopulation was performed by a script, mtsaveaddress.js.  

Recently I have installed an updated version of the reservation system software, and mtsaveaddress.js no longer functions.  I'd appreciate help in adapting it to the new software version.

To reproduce the issue, visit www.mauitradewinds.com/Test/rezeasy.html and follow these steps:

1. Click "New Booking".  On that page, enter arrival date 4-1-14 and departure date 4-10-14, then click "Book Now!".

2. On the next page, enter some data into a couple of form fields.  Then, on the lower form, click the pencil icon, which opens a page for modifying a booking.  Just click "Confirm", and you will be returned to the page where you entered some data.

3. The form fields are now empty.  If you start typing, the system may suggest an autocompletion of your data, but this is not the objective.  Previously, the form fields were complete when the page was reloaded, saving the visitor the effort of typing again.

I'd appreciate your guidance in restoring this feature.mtSaveAddress.js
ddantesAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
You right, there's a missing file, take from here (end of the page here : https://github.com/BenGriffiths/jquery-save-as-you-type)
 
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="Test/jquery.cookie.js"></script>
<script src="Test/sayt.min.jquery.js"></script>
<script type="text/javascript">
jQuery(function($) { $('form').sayt(); }); 
</script>

Open in new window

0
 
leakim971PluritechnicianCommented:
From the following lines, your script save only from FirstName,...,Agree_terms
But not the Arrival (ArrDate) and Departure(DepDate) Date.

	addressData = document.getElementById("FirstName").value + "|";
	addressData += document.getElementById("LastName").value + "|";
	addressData += document.getElementById("Address").value + "|";
	addressData += document.getElementById("City").value + "|";
	addressData += document.getElementById("State").value + "|";
	addressData += document.getElementById("PostCode").value + "|";
	addressData += document.getElementById("Country").selectedIndex + "|";
	addressData += document.getElementById("Phone").value + "|";
	addressData += document.getElementById("Email").value + "|";
	if(document.getElementById("Agree_Terms").checked)

Open in new window

You should add :
	addressData += document.getElementById("ArrDate").value + "|";
	addressData += document.getElementById("DepDate").value + "|";

Open in new window

But You should test if the field is available FOR EACH field else it will stop working so instead having :
      addressData = document.getElementById("FirstName").value + "|";
Add a test :

      if(document.getElementById("FirstName")) addressData = document.getElementById("FirstName").value + "|";
      if(document.getElementById("LastName")) addressData = document.getElementById("LastName").value + "|";

and so on.
0
 
ddantesAuthor Commented:
Thank you.  I should have clarified that the fields covered in mtsaveaddress.js are the ones which need to be saved.  Other fields will be changed by the user, or else they would not navigated away from that form to change those details.  With the new version of software, none of the fields are repopulated by that js.
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
leakim971PluritechnicianCommented:
As you sent a link to your page it was very clear to me unlike my comments...
Currently your code stop working when some fields are NOT presents in the page generating a Javascript error which stop the saving of the values in a cookies.
You MUST add a test.
But I think you MUST use a separate cookie for ArrDate and DepDate fields too as you save the whole values inside ONE cookie so it will overwritte the values for FirstName, LastName (an so on) values because it's a different page.

With the new version of software, none of the fields are repopulated by that js.

Yes, as I said, there's a javascript error because the field are not in the page
0
 
ddantesAuthor Commented:
Thank you.  I didn't understand before, and I'll implement your recommendation, then post again...
0
 
ddantesAuthor Commented:
OK, I edited the js, but the fields are still not repopulated.  I don't know how to use a separate cookie for ArrDate and DepDate fields, and I hope I explained that those fields should NOT be repopulated.  However, I think that those two fields may not be the issue.  I'm posting a screen shot of the fields which were present on the previous software version, where the original mtsaveaddress.js works OK.  It appears to me that the fields are identical.  I'm attaching the modified js.Previous sofware version data fieldsmtSaveAddress.js

Also, I should have removed "onload" from the <body> tag of checkout.html, because that has been included in the js.
0
 
leakim971PluritechnicianCommented:
Look like the wrong js, I don't see any difference
0
 
ddantesAuthor Commented:
Thank you for your comments.  The original mtsaveaddress.js has begun saving form data, but only with Internet Explorer, and only with pages on the remote server.  It won't work with Chrome or Firefox,

I had difficulty with the modifications you recommended.  The script with the tests would not work on this software version, or on the previous software version.  Perhaps I made some mistakes in editing the js file.
0
 
leakim971PluritechnicianCommented:
Replace your current script :
<script src="Test/mtSaveAddress.js"....</script>

Open in new window


by (download sayt.min.jquery.js here : https://github.com/BenGriffiths/jquery-save-as-you-type/tree/master/source)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="Test/sayt.min.jquery.js"></script>
<script type="text/javascript">
jQuery(function($) { $('form').sayt(); }); 
</script>

Open in new window

0
 
ddantesAuthor Commented:
Thank you.  I'm hopeful this will work, but so far, it doesn't.  Please try it yourself and let me know.
0
 
ddantesAuthor Commented:
Yes!
Thank you for persisting, and for your patience with my learning curve.
0
 
leakim971PluritechnicianCommented:
you're welcome!
0
 
ddantesAuthor Commented:
.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.