Solved

Re-populating form fields when a page reloads

Posted on 2014-03-21
13
287 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
  • 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
 

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

I hope you'll find this tutorial useful and interesting. So let's try to extend Tcl with a new package.  For anyone more deeply interested please check out the book "Practical Programming in Tcl and Tk". It's really one of the best written books abo…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

760 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now