The simplest way to solve this problem is to place INPUT fields outside the FORM tag and add two hidden fields inside the FORM tag. Then in a submit event listener before the form data gets submitted to server copy values from visible input to the invisible ones.
Here's an example (you can't run it here, since the form action is not set to a real login script):
<!doctype html>_x000D_
<html>_x000D_
<head>_x000D_
<title>Login & Save password test</title>_x000D_
<meta charset="utf-8">_x000D_
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<!-- the following fields will show on page, but are not part of the form -->_x000D_
<input class="username" type="text" placeholder="Username" />_x000D_
<input class="password" type="password" placeholder="Password" />_x000D_
_x000D_
<form id="loginForm" action="login.aspx" method="post">_x000D_
<!-- thw following two fields are part of the form, but are not visible -->_x000D_
<input name="username" id="username" type="hidden" />_x000D_
<input name="password" id="password" type="hidden" />_x000D_
<!-- standard submit button -->_x000D_
<button type="submit">Login</button>_x000D_
</form>_x000D_
_x000D_
<script>_x000D_
// attache a event listener which will get called just before the form data is sent to server_x000D_
$('form').submit(function(ev) {_x000D_
console.log('xxx');_x000D_
// read the value from the visible INPUT and save it to invisible one_x000D_
// ... so that it gets sent to the server_x000D_
$('#username').val($('.username').val());_x000D_
$('#password').val($('.password').val());_x000D_
});_x000D_
</script>_x000D_
_x000D_
</body>_x000D_
</html>