Solved

Re-populating form fields when a page reloads

Posted on 2014-03-21
13
292 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

770 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