Why does return false still allow the submission of the form?
===

I am attempting to populate a form field prior to it being submitted however the function appears to be disregarded and am unsure whether I am doing it incorrectly. Why is the form allowed to be submitted even though I am returning false?

**Code**

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	<meta http-equiv="content-language" content="en" />
    	<meta http-equiv="cache-control" content="no-cache" />
    	<meta http-equiv="pragma" content="no-cache" />
    	<meta name="keywords" content="" />
    	<meta name="description" content="" />
    	<meta name="author" content="" />
    	<meta name="copyright" content="&copy; 2012" />
    	<meta name="robot" content="noindex, nofollow" />
    	
    	<title> sample form</title>
    	
    	<base href="" />
    	
    	<link rel="stylesheet" type="text/css" media="all" href="" />
    	
    	<style type="text/css">
    	
    	</style>
    	
    	<script type="text/javascript">
    	
    	function formDetails() {
    		var name = document.forms["sampleform"]["name"].value = "test"
            return false;
    	}
    	
    	</script>
    </head>
    <body>
    <form id="sampleform" name="sampleform" action="" method="get">
    	<p><label for="name">Name</label>
    	<input type="text" name="name" id="name" maxlength="50" /></p>
    
    	<p><input type="submit" name="submit" value="submit" onClick="formDetails();" /></p>
    </form>
    
    </body>
    </html>