I have a two-step login form. In the first step, I have "username" as "id" and "name" of the text input. I also have "password" as id and "name" of the second input field, where the user is prompted to enter username and password.
In the second step, I have "confirmusername" as "id" and "name" of the text input. I also have "confirmpassword" as "id" and "name" of the text input.
I want the the value of the "username" entered in the first step to become the value of "confirmusername".
Your help would be much appreciated. Thanks in advance.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
form#multiphase{ border:#000 1px solid; padding:24px; width:350px; }
form#multiphase > #show_all_data{ display:none; }
</style>
<script>
var username, password, confirmusername, confirmpassword;
function _(x){
return document.getElementById(x);
}
function processPhase1(){
username = _("username").value;
password = _("password").value;
if(username.length > 2){
_("display_username").innerHTML = username;
_("display_password").innerHTML = password;
_("phase1").style.display = "none";
_("show_all_data").style.display = "block";
}
}
function submitForm(){
confirmusername = _("confirmusername").value;
confirmpassword = _("confirmpassword").value;
if(confirmpassword.length > 0){
_("multiphase").method = "post";
_("multiphase").action = "";
_("multiphase").submit();
}
}
</script>
</head>
<body>
<form id="multiphase" onsubmit="return false">
<div id="phase1">
Username: <input id="username" name="username"><br>
Password: <input id="password" name="password"> <br>
<button id="next" onclick="processPhase1()">Next</button>
</div>
<div id="show_all_data">
Username: <span id="display_username"></span> <br>
Password: <span id="display_password"></span> <br>
Confirm Username: <input id="confirmusername" name="confirmusername" value=""><br>
Confirm Password: <input id="confirmpassword" name="confirmpassword"> <br>
<button onclick="send()">Send</button>
</div>
</form>
<script>
var input = document.getElementById("username");
var input = document.getElementById("password");
input.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("next").click();
}
});
</script>
<script>
var input = document.getElementById("confirmusername");
var input = document.getElementById("confirmpassword");
input.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("send").click();
}
});
</script>
</body>
</html>