call function from js file in html file
===

I have one html file. In that file on click of button I want to call a function which is in a js file. How to do that?

Here is my html file as:

    <!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
	   <title>Scrollable HTML table plugin for jQuery</title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>jQuery Mobile: Demos and Documentation</title>


    <link rel="stylesheet" href="../jquery.mobile/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="../docs/assets/css/jqm-docs.css" />
    <link rel="stylesheet" href="../docsdemos-style-override.css" />
    <script type="text/javascript" charset="utf-8" src="../cordova-1.6.1.js"></script>
    <script type="text/javascript" src="../jquery.mobile/jquery-1.7.2.min"></script>
    <script type="text/javascript" charset="utf-8" src="../js/main.js"></script>
    <script type="text/javascript" src="../jquery.mobile/jquery.mobile-1.1.0.js"></script>


    </head>
    <body  >

	<!-- main login page -->
	<div id="mypage" data-role="page" data-theme="a" data-ajax="false">


		<div data-role="header" align="center">
			<img border="0" src="../jquery.mobile/images/toplogo.png" />

		</div>


		<div data-role="content">

			<form id="loginForm" >
				<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br" >
					<label for="username">Username:</label> <input type="text"
						name="username" id="username" value="" /> <label for="password">Password:</label>
					<input type="password" name="password" id="password" value="" /> <label
						for="dob">Date of birth:</label> <input type="password"
						type="password" name="dob" id="dob" value="" />
				</div>
				<div class="ui-body ui-body-a" >
					<fieldset class="ui-grid-a" data-theme="a" >
						<div class="ui-block-a" data-theme="a">
							<input type="submit" data-role="button" value="Login"
								id="submitButton">
						</div>
						<div class="ui-block-b" data-theme="a">
							<input type="reset" data-role="button" value="Cancel"
								id="cancelButton"> 
						</div>

					</fieldset>
				</div>
			</form>

		</div>
	</div>


	<!-- main menu -->
	

	<script>
		
		console.log("clickkkkkkkkkkkkkkkkkkkk");
 		$("#loginForm").on("submit",handleLogin);
   
    
	</script>


</body>
</html>
This html file is in www/UI folder. Now there is below js file name as main.js which is in www/js folder. which contains  handleLogin function.

    function handleLogin()
    {

     }

How to call this function from my html file. Because when I click on login button same page is get called. Any help will be appreciated. Thanks in advance.