CODEWITHSUNDEEP
javascripthtmlcordova
temporary_user_name
temporary_user_name

Reputation: 37078

Passing a javascript variable on to the next page WITHOUT server-side interference?

I'm making a web-app with PhoneGap. Here's my current hurdle:

On page one, the user chooses a latitude and longitude, then hits continue. With some nice GET action on the form and a javascript URL parser on the next page, the next page thus is passed the lat and lng coordinates. On this new page, the user is asked to input a radius. Via the same method, the radius is passed on to the final page, which displays a google map with a circle on it made from the coordinates and the radius.

But the problem is that when I pass the radius on to the final page, it obviously only passes the radius. How can I pass the lat and lng onwards from the second page, which aren't part of form information? They're already established. I know the obvious solution is to put all three variables on one page, but for foolish reasons beyond my control it needs to be this way.

So the question stands: how do you pass information that exists as a variable in javascript on to the next page? It's not part of a form. Just a variable.

Upvotes: 1

Views: 1225

Answers (3)

Rocky
Rocky

Reputation: 304

Easier option would be to create a cookie using Javascript/jQuery and add the values to it. So you can add all the values on every page and then finally retrieve the data you want, just from the cookie. You use no server side scripting yet you get all the values you need.

Upvotes: 0

dangerChihuahua007
dangerChihuahua007

Reputation: 20905

You can access get data in Javascript. Hence, just pass your data into the next page as get data in the URL and parse it as follows with Javascript.

Where your URL contains ?foo=1&bar=2 at the end, you can parse foo and bar with

var parts = window.location.search.substr(1).split("&");
var $_GET = {};
for (var i = 0; i < parts.length; i++) {
    var temp = parts[i].split("=");
    $_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
}

alert($_GET['foo']); // 1
alert($_GET.bar);    // 2

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179116

All you need to do is add a couple hidden input elements to the form (<input type="hidden" />).

This can be done many ways. The shortest is to use a library (example code happens to be jQuery):

$('<input type="hidden" name="lat" />').val(latitudeValue).appendTo(formSelector);
$('<input type="hidden" name="lng" />').val(longitudeValue).appendTo(formSelector);

Raw JS is a bit longer, but not particularly complicated:

//I haven't checked this, so some cross-browser tweaking might be necessary
var lat,
    lng,
    form;
lat = document.createElement('input');
lat.type = 'hidden';
lat.value = latitudeValue;
lng = document.createElement('input');
lng.type = 'hidden';
lng.value = longitudeValue;
form = document.querySelector(formSelector);
form.appendChild(lat);
form.appendChild(lng);

latitudeValue, longitudeValue, and formSelector are variables that you'd have to define in the context of your page. You might also use a different parameter name, such as name="longitude".

It sounds like you really should be using AJAX to change the content of the page, so that you're not making consecutive GET requests. Instead, you could simply be swapping out the main content of the page depending on which step in the process the user is on. It would remove the necessity to do any URL parsing (which is easy to do incorrectly).

Upvotes: 1

Related Questions