Store value in URL with keeping the original values in browser

So I'm creating am ASP.net page using JavaScript to calculate distance between two zipcodes. after submitting the form, the page shows both addresses and the distance. However, I want to use these values in ASP.NET so I stored the distance in the URL so i can call it with a .net label but when I do so, and since it has to go back to the server, it refreshes the page and deletes the JavaScript calculated values! I want to store the distance in URL in addition to keep the calculated values on page. Here is what I have now

var geocoder, location1, location2;


function initialize() {
    geocoder = new GClientGeocoder();
}

function showLocation() {
    geocoder.getLocations(document.forms[0].address1.value, function (response) {
        if (!response || response.Status.code != 200)
        {
            alert("Sorry, we were unable to geocode the first address");
        }
        else
        {
            location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
            geocoder.getLocations(document.forms[0].address2.value, function (response) {
                if (!response || response.Status.code != 200)
                {
                    alert("Sorry, we were unable to geocode the second address");
                }
                else
                {
                    location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                    calculateDistance();
                }
            });
        }
    });
}

function calculateDistance()

{
    try
    {
        var glatlng1 = new GLatLng(location1.lat, location1.lon);
        var glatlng2 = new GLatLng(location2.lat, location2.lon);
        var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
        var kmdistance = (miledistance * 1.609344).toFixed(1);


        document.getElementById('results').innerHTML = 
        '<strong>Address 1: </strong>' + location1.address + 
        '<br /><strong>Address 2: </strong>' + location2.address + 
        '<br /><strong>Distance: </strong>' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';
        //+ '<br /><strong>HiddenField </strong>' + miledistance;

                var l开发者_开发技巧oc = self.location.href;
        window.location.href = loc+"?D="+miledistance;

    }

    catch (error)
    {
        alert(error);
    }

}


</script>

<form action="#" onsubmit="showLocation();return false;">
  <p>
    <input type="text" name="address1" value="45419" class="address_input" size="40" />
    <input type="text" name="address2" value="47714" class="address_input" size="40" />
    <input type="submit" name="find" value="Search" />
  </p>
</form>
<p id="results"></p>

<form id="form1" runat="server">
<div>

    <asp:Label ID="Label3" runat="server"></asp:Label>
    <br />
    <asp:Label ID="Label2" name="address1" value="Address 1" class="address_input" size="40" runat="server"></asp:Label>

<br />
    <asp:Label ID="Label1" runat="server"></asp:Label>
    <br />
    <br />
    <asp:Button ID="Button1" runat="server" PostBackUrl="~/Size.aspx?a='miledistance'" Text="Next" />

</div>
</form>

You should pass values back to the server using form fields, not as parameters in your URL.

Try adding a hidden field to your form called distance:

<input type="hidden" name="distance" value=""/>

Then populate this hidden field in your calculateDistance() function:

document.getElementById('distance').value = miledistance;

Then you can grab this value server side:

string distance = Request["distance"];

or

int distance = Convert.ToInt32(Request["distance"]);

Use Literal form controls if you want to then display this value on the screen after the post back.

Good luck!