Best way to pass data between pages

This site is best viewed in a modern browser with JavaScript enabled.

chrisboots

Hi.

Ive finished my works websites price calculator, and now am moving onto a booking page. On the price calculator they input the car they want 2 sets of dates and two times, so i need to pass 5 bits of data for 5 diffrent text boxs/ select options. I have had a quick google and so many poeple say to do it differently. So as this website has helped me a LOT already i thought id ask as im sure someone know how to do it. Also I am new to java script so if you do know the best way, could you provide a link to a tutorial.

Thanks in advanced

JunkMale

1 method is to use cookies between pages
2 method is passing values in a URL using the form and a GET instead of POST method.

If this calculator and booking form are on a non public system, then you could opt for the URL method as it poses no security risks to people manipulating the URL elements.

the the cookie method can be made so that the data is retained longer so that on a "next" visit, you can retrieve that cookie. The cookie method relies on the browser settings but would give you a bit more flexability with data size over the URL methods character length. In old browsers it is 255 characters, in modern browsers, about 2000 characters.

I am aware of other methods but theyre a bit complex for passing data between pages.

Another way of appearing to have pages is to have a set of DIVs that act as containers for the pages all set up in one long page that uses CSS to hide those pages / tabs from sight and only show when needed.

chrisboots

JunkMale;1191833 wrote:
1 method is to use cookies between pages
.

The Page is public, Id rather go for the easiest way to do it but have it still be secure, There would be any "harmful" data passed between the two pages as it would just be a car and 4 dates, so maybe the url method would be ok?

Sor3nt

have a look to postMessage, maybe its help

JunkMale

Using the URL method would be fine, the following script should work in either two modes.

function urlGet(f){
	var str = location.search.slice(1).split("&"), retVal = [], f = f || false;
	for(p=0; p<str.length; p++){
	// get the values.
	if( str[p].indexOf("=") > 0 ){
	var pv = str[p].split("=");
	retVal[ pv.shift() ] = pv.pop();
	}
}
return f ? retVal[f] : retVal;
}	

queryVals = urlGet();

// or 

specificField = urlGet('someFieldName');

therefore a GET url of http://yourdomain.com/index.html?car=kia&date1=23%2F3%2F2012

asking urlGet('car') should return kia

The functions not perfect by any means and you would need to be aware of that, so passing a URL containing &= elements won't work unless the script is modified to cope with it. It requires &fldName=fldValue&fldName=fldValue&fldName=fldValue URLs to work.

WyCnet

If the select boxes are in the form of PageA then their values can be easily POSTed. The GET method is only useful for embedding links in emails with set parameters used for some verification purpose. I have assumed PageA and PageB are not at the browser at the same time, because if they are then another technique has to be used.

JunkMale

WyCnet;1191842 wrote:
If the select boxes are in the form of PageA then their values can be easily POSTed. The GET method is only useful for embedding links in emails with set parameters used for some verification purpose. I have assumed PageA and PageB are not at the browser at the same time, because if they are then another technique has to be used.

POST requires web server side implementation otherwise the POSTing goes to the trash.

GET does not require a server-side, the value is returned automatically.

In response to your comment about the use of GET, it has limitations on length but not on its use. So your clouding the issue with problems that do not exist. As long as you treat the URL by escaping values that need to be escaped, you should not have any problems and also keeping the URL under 2000 characters.

WyCnet

Ok, JunkMale I agree that you are parsing links at the browser level, and that there are no physical limitations when using parameters encoded in a URL.

chrisboots

JunkMale;1191839 wrote:
Using the URL method would be fine, the following script should work in either two modes.

Yet again your code is going right over my head ! Im not to sure where to put it, or where to add the values from my page or anything. my box id's are

"car" - select box
"firstDate" - Text box
"time1" - select box
"secondDate" - text
"time2" - select
"days" - text
"rentalamount" - text

Im sorry to keep asking for help but, as you may know, Javascript is not my biggest strength

JunkMale

In all cases with JavaScrip, it is best put in the HEAD or the HTML page

if you look in the editor at the source, you will find code like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Booking Page</title>
<script type="text/javascript">
<!-- 
function urlGet(f){
	var str = location.search.slice(1).split("&"), retVal = [], f = f || false;
	for(p=0; p<str.length; p++){
	// get the values.
	if( str[p].indexOf("=") > 0 ){
	var pv = str[p].split("=");
	retVal[ pv.shift() ] = pv.pop();
	}
}
return f ? retVal[f] : retVal;
}	


//-->
</script>

Your scripts should be placed in the <HEAD> section of the document.

Your sending page form will need the form element to be set to GET

<form name="myform" action="booking.html" method="GET">

Your browser on the sending page will write the URL automatically on submit.

So your receiving page will need the function to access the field data in the URL.
So use of the function in the script

passedData = urlGet(); // grabs the data in the URL

will grab all that was passed as data and it is represented as an associative array of elements.

So... passedData['firstDate'] will return the value found in the URL for that element.

You quote the following

"car" - select box
 "firstDate" - Text box
 "time1" - select box
 "secondDate" - text
 "time2" - select
 "days" - text
 "rentalamount" - text

which equates to a URL like...

?car=selectedElement&firstDate=Text&time1=selectedElement&secondDate=text&time2=selectedDate&days=text&rentalamount=text

IMHO, you would be better off calculation the time and date references in the sending page, all JS times are expressed in milliseconds, so passing that value as a parameter in a URL you could reduce your URL to

car=carMake&firstDate=timeInMilliseconds&secondDate=timeInMilliseconds&days=days&rentalamount=amounttocharge

All dates and times boil down to milliseconds therefore passing dates and times can be replaced by a reference which will be in milliseconds.

The receiving script would only need to return a numeric value in to a date object to reconstruct the booking dates and times.

dateString = new Date( urlGet('firstDate')-0 ).toUTCString();

would return a date based on the number of milliseconds passed as a parameter. This method would reduce the need to escape date values in URLs.

To recap...

Your sending page calls the recieving page, as it ia a GET operation the data is automatically passed in the URL as a parameter.
Your receiving page uses a function to help you pull values and data from the URL.

I hope that clears some of the mystery up.

chrisboots

JunkMale;1191882 wrote:
In all cases with JavaScrip, it is best put in the HEAD or the HTML page

i.

WOW thanks, really dont know how i would of done anything without you !. I think i get it, but how do i set up the text boxes on the receiving page, is it just a text box with the same value name ?

thanks

chrisboots

JunkMale;1191882 wrote:
I

I hope that clears some of the mystery up.

Thanks! i now have it all working, but with a small problem, it only takes over the car , time1 and time1 boxes, but not the firstDate secondDate rentalammount or days box, any idea why not ?

chrisboots

JunkMale;1191882 wrote:

Ignore the last two post's ive got it to work, had some boxes as disabled="true" which broke it. Now i have some more problems

The date boxes will not carry over and i really cant see why, also the price and the deposit come over as %a3xxx with the xxx being the price value is there an easy way to stop that? also the days come up as 1+days can i get rid of the + ?

thanks

JunkMale

chrisboots;1191997 wrote:
Ignore the last two post's ive got it to work, had some boxes as disabled="true" which broke it. Now i have some more problems

The date boxes will not carry over and i really cant see why, also the price and the deposit come over as %a3xxx with the xxx being the price value is there an easy way to stop that? also the days come up as 1+days can i get rid of the + ?

thanks

What you need to do is unescape(), decodeURI() or decodeURIComponent() will convert the %xx values, you will have to play with the functions to get the right result.