Как скопировать текст из одного ввода текстового поля в другой, используя BTN?

Question

Мне нужно скопировать текстовые значения из одного ввода текстового поля в другое. Как я могу это сделать? Я создал скрипку js, в которой есть текстовая форма, и когда я нажимаю на детали редактирования, появляется другая форма. В этой новой форме я хочу иметь возможность вводить текст в любое из присутствующих текстовых полей, а затем, когда я нажму «Сохранить». Вновь введенный текст будет перемещен / скопирован / перенесен в исходные текстовые поля на экране.

вот jsfiddle - https://jsfiddle.net/xsuh6pf7/2/

 <h1>Your Name and Address</h1>
    <form action="/">
      <div class="nameDiv">
        Name: <input type="textbox" name="firstname" title="name" id="name">

        <div class="dotOne"> ? </div>
        <span class="nameHelp"> Please enter first and last name   </span>

      </div>
      <br>
      <div class="addressDiv">
        Address: <input type="text" name="lastname" id="address">
        <div class="dotTwo">?</div>
      </div>
      <br>
      <div class="emailDiv">
        Email:
        <input type="text" name="Email" class="email">
        <span class="dotThree">?</span>
      </div>
      <br>
      <div class="numberDiv">
        Phone number:
        <input type="text" name="Phone number" class="number">
        <span class="dotFour">?</span>
      </div>
      <br>
    </form>
    <button class="btn" onclick="openForm()">Edit Details</button>

    <div id="container">
      <button class="tablink" onclick="openPage('Name', this, 'grey')" id="defaultOpen">Name</button>
      <button class="tablink" onclick="openPage('Address', this, 'grey')">Address</button>

      <div id="Name" class="tabcontent">

        <form>
          <div class="nameDiv">
            Title: <input type="text" name="firstname" title="name" class="name">
          </div>
          <br>
          <div class="addressDiv">
            Name: <input type="text" name="lastname" id="nameTransfer">
          </div>
          <br>
          <div class="emailDiv">
            Surname:
            <input type="text" name="Email" id="LastNameTransfer">
          </div>
          <br>
          <div class="numberDiv">
            Email Address:
            <input type="text" name="Phone number" class="number">
          </div>
          <br>
          <div class="numberDiv">
            Phone number:
            <input type="text" name="Phone number" class="number">
          </div>
          <button type="submit" id="save-btn" onclick="moveContent()">Save</button>
        </form>
      </div>

      <div id="Address" class="tabcontent">
        <form>
          <div class="nameDiv">
            Line 1: <input type="text" name="firstname" value="Mickey" title="name" class="name">
          </div>
          <br>
          <div class="addressDiv">
            Line 2: <input type="text" name="lastname" value="Mouse" class="address">
          </div>
          <br>
          <div class="emailDiv">
            Suburb:
            <input type="text" name="Email" value="Email" class="email">
          </div>
          <br>
          <div class="numberDiv">
            State:
            <input type="text" name="Phone number" value="Phone number" class="number">
          </div>
          <br>
          <div class="numberDiv">
            Country:
            <input type="text" name="Phone number" value="Phone number" class="number">
          </div>
          <button class="save-btn" onclick="">Save</button>
        </form>
      </div>
    </div>

Answer 1

Я думаю, что проблема, мешающая другим ответам / комментариям работать на вас (использование document.getElementById()), заключается в том, что ни один из ваших <input /> на самом деле не имеет атрибута id - просто name, например

<input type="text" name="firstname" value="Mickey" title="name" class="name">

Вам нужно было бы либо добавить id="firstname", чтобы вы могли сделать:

document.getElementById("firstname").value = document.getElementById("firstnameTransfer").value

Или вы можете использовать document.querySelector() для выбора правильного <input /> без добавления атрибута id, например ::

document.querySelector("input[name='firstname']")

Answer 2

В вашем Javascript вы можете попробовать добавить

document.getElementById("name").onchange = function(){
    nameChange();
}

function nameChange(){
    document.getElementById("nameTransfer").value = document.getElementById("name").value;
}

Это, конечно, будет работать только для ввода имени.

Answer 3

Вы можете использовать

document.getElementbyId ("textfieldToTransfer"). Value = document.getElementbyId ("textfieldOfData"). Value;

о функции вашей кнопки.