How Can I Use JavaScript to Output Value of Input A into Input B?

Issue

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.

var username, password, confirmusername, confirmpassword;


const _=(x)=>document.getElementById(x);
const send=()=>alert('send');

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();
  }
}

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();
  }
});


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();
  }
});

form#multiphase {
  border: #000 1px solid;
  padding: 24px;
  width: 350px;
}

form#multiphase>#show_all_data {
  display: none;
}

<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">
    <br>Confirm Password: <input id="confirmpassword" name="confirmpassword">
    <br>
    <button onclick="send()">Send</button>
  </div>
  
</form>

Solution

When you enter something into an input element the input event fires. In this case if the name of the input is either username or password the value of that input should be copied to both the corresponding output and confirm elements.

Get rid of all the IDs and use names instead. Also use the fieldset. You can see that it is easy to show/hide when you bind the disabled property to CSS.

document.forms.multiphase.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  console.log([...data]);
});

document.forms.multiphase.addEventListener('input', e => {
  let input = e.target;
  let form = input.form;

  switch (input.name) {
    case 'username':
    case 'password':
      form[`display_${input.name}`].value = input.value;
      form[`confirm${input.name}`].value = input.value;
      break;
  }
});

document.forms.multiphase.next.addEventListener('click', e => {
  let form = e.target.form;
  if (form.reportValidity()) {
    form.phase1.disabled = true;
    form.show_all_data.disabled = false;
  }
});

form[name="multiphase"] {
  border: #000 1px solid;
  padding: 24px;
  width: 350px;
}

fieldset {
  border: none;
}

fieldset:disabled {
  display: none;
}

<form name="multiphase">
  <fieldset name="phase1">
    Username: <input type="text" name="username" required>
    <br>Password: <input type="text" name="password" required>
    <br>
    <button type="button" name="next">Next</button>
  </fieldset>
  <fieldset name="show_all_data" disabled>
    Username: <span><output name="display_username"></output></span>
    <br>Password: <span><output name="display_password"></output></span>
    <br>Confirm Username: <input type="text" name="confirmusername">
    <br>Confirm Password: <input type="text" name="confirmpassword">
    <br>
    <button type="submit">Send</button>
  </fieldset>
</form>

Answered By - chrwahl