?
Solved

Re-populating form fields when a page reloads

Posted on 2014-03-21
13
Medium Priority
?
300 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
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…
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

752 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