<!--
Here is my html document and I woulkd like to login from "#login" to "#page2"
internaly(on my local host). Thanks in advance.
-->
<!DOCTYPE html>
<html>
<head>
<title>My portfolio</title>
<meta name="viewport" content="width = deivice-width, initial-scale =1">
<link rel="stylesheet" href="themes/MyThemes.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</style>
<script type="text/jscript">
$(function(){
$("#btn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
if(username == "Rodrigue" && password == "123456" )
$(#page2).show();
else
alert("Réessayer peut-etre !!");
});
});
</script>
</head>
<body>
<div data-role="page" id="login" data-theme= "b" >
<h1> Login Header</h1>
</div>
<div data-role="content">
<form>
<label for="username">Username</label>
<input type="text" id="username" />
<label for="password">Password</label>
<input type="password" id="password" />
<button id="btn" data-inline="true">Confirmer</button>
</form>
</div>
<div data-role="footer" data-position = "fixed">
<h4>Login Footer</h4>
</div>
</div>
<div data-role="page" id="page2" data-theme= "b" >
</div>
<div data-role="content">
<ul data-role="listview">
<div data-role = "fieldcontain">
<li>
<a href="#" data-role="button">Some text</a>
</li>
<li>
<a href="#" data-role="button">Some text</a>
</li>
<li>
<a href="#" data-role="button">Some text</a>
</li>
</div>
</ul>
</div>
<h4>Page Footer</h4>
</div>
</div>
</body>