Javascript refreshing page, I can't tell why

Question

I'm a newbie to javascript (or web development of any sort, really), and having trouble tracking down a bug. Basically pressing the "Route (desktop version)" button here should trigger a function, calcRoutePartOne(), which it does.

function calcRoutePartOne()
    {
        alert("calcRoutePartOne");
        shortestTimeIndex = "undefined";
        lowestTotalCost = "undefined";
        shortestDistanceIndex = "undefined";
        shortestDistance = "undefined";
        alert("Alert B");
        displayLoadingImage();
        alert("Alert C");
        var startText = document.getElementById("start").value;
        alert(startText);
        geocoder.geocode( 
        { 
            'address':startText
        }, 
        function(results, status)
        {
            if (status == google.maps.GeocoderStatus.OK)
            {
                start = results[0].geometry.location;
                alert(start);
                calcRoutePartTwo();
            }
            else
            {
                alert("Failed to geocode start address \n Error: " + status);
                hideLoadingImage();
            }
        });
    }

This function executes fine for me, all the alerts firing off as they should, but then instead of calling calcRoutePartTwo() the page just refreshes [edit: Now it's sometimes getting to calcRoutePartTwo and THEN refreshing, which is also not what it should be doing].

Particularly puzzling is that I've had this code working before - at the moment I'm just refactoring, and working on the UI, so I don't understand how this has suddenly started happening.

The code I'm having a problem with I have available here. I also have the previously working code, which is practically identical apart from the UI, here

The problem has only started since I started using jquery, so I wonder is there some error in jquery which causes this behaviour? The page shouldn't refresh at all, at any point - as the code stands, it should redirect to google after reaching the end

Thanks.

EDIT: This is the possibly-offending function:

function calcRoutePartTwo()
    {
        alert("calcRoutePartTwo");
        var endText = document.getElementById("end").value;
        geocoder.geocode( 
        { 
            address: endText
        }, 
        function(results, status)
        {
            if (status == google.maps.GeocoderStatus.OK)
            {
                end = results[0].geometry.location;
                console.log(end);
                calcRoutePartThree();
            }
            else
            {
                alert("Failed to geocode end address \n Error: " + status);
                hideLoadingImage();
            }
        });
    }

Or the problem could, I guess, be almost anywhere else on the page either. I just have no idea.

Answer 1

I don't have time to answer properly because my wife will get cross, but... I find using console.log("Message blah blah"); far less annoying than alert("Message blah blah"); if you're using Firefox/Firebug (which I recommend if you're not!). Gotta go...

Answer 2

The JavaScript is not "reloading" the site, but the form in the HTML code is. Try adding onsubmit="return false" to the form tags.