[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Re-populating form fields when a page reloads

Posted on 2014-03-21
13
Medium Priority
?
301 Views
Last Modified: 2014-04-12
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
0
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
13 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39945633
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
 

Author Comment

by:ddantes
ID: 39945933
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39946140
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ddantes
ID: 39946153
Thank you.  I didn't understand before, and I'll implement your recommendation, then post again...
0
 

Author Comment

by:ddantes
ID: 39946394
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39946473
Look like the wrong js, I don't see any difference
0
 

Author Comment

by:ddantes
ID: 39946491
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39946759
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
 

Author Comment

by:ddantes
ID: 39946783
Thank you.  I'm hopeful this will work, but so far, it doesn't.  Please try it yourself and let me know.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 39946784
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
 

Author Comment

by:ddantes
ID: 39946805
Yes!
Thank you for persisting, and for your patience with my learning curve.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39946816
you're welcome!
0
 

Author Comment

by:ddantes
ID: 39996501
.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question