Question

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.

Answer 1

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