Как исправить мою неисправную HTML-форму с помощью JavaScript?

Question

Я настроил макет двойной формы, один рядом с другим, и по сути я пытаюсь, чтобы входные данные из первой формы оказались в полях для второй формы. Обе формы находятся на одной странице, и в идеале вторая форма будет хранить данные при их получении, даже если страница будет перезагружена.

Я думал, что я разработал первую часть; куда данные будут отправляться при нажатии кнопки «Отправить», но, похоже, я где-то ошибся.

Будем благодарны за любые уточнения относительно моей ошибки.

До сих пор я пытался использовать функцию JavaScript с GetElementById для отправки своих входных данных.

Ниже приведен образец моего выпуска:

Моя цель - использовать кнопку «Отправить» из формы 1 для отображения входных данных в полях формы 2, в идеале, когда указанные данные остаются после закрытия и повторного входа на страницу.

function sendData(f1) {
  document.getElementById('name').innerHTML = f1.name.value;
}

.left {
  background-color: aqua;
  border: 1px solid black;
  float: left;
  padding: 20px;
  box-sizing: border-box;
  width: 50%;
}

.right {
  background-color: aquamarine;
  border: 1px solid black;
  float: right;
  padding: 60px;
  width: 50%;
  box-sizing: border-box;
}

<div class="left">
  <form name="form1">
    <fieldset>
      <legend>SEND DATA</legend>
      <table border="1" cellpadding="20px" align="center">
        <tr>
          <td><label>Student Name</label></td>
          <td><input type="text" name="name"></td>
        </tr>

        <tr>
          <td></td>
          <td align="right"><input type="button" value="SEND" onclick="sendData('form1')"></td>
        </tr>
      </table>
    </fieldset>
  </form>
</div>
<div class="right">
  <form>
    <fieldset>
      <legend>RECEIVE DATA</legend>
      <table border="1" cellpadding="20px">
        <tr>
          <td><label>Student Name</label></td>
          <td><label id="name"></label></td>
        </tr>
      </table>
    </fieldset>
  </form>
</div>

Answer 1

Вы отправляете свою форму form1 как строку в функции sendData. Вместо этого отправьте его без кавычек.

Или Вы можете присвоить своему текстовому полю идентификатор и получать данные, используя этот идентификатор.

function sendData(f1) {
  document.getElementById('name').innerHTML = f1.name.value;
}

.left {
  background-color: aqua;
  border: 1px solid black;
  float: left;
  padding: 20px;
  box-sizing: border-box;
  width: 50%;
}

.right {
  background-color: aquamarine;
  border: 1px solid black;
  float: right;
  padding: 60px;
  width: 50%;
  box-sizing: border-box;
}

<div class="left">
  <form name="form1">
    <fieldset>
      <legend>SEND DATA</legend>
      <table border="1" cellpadding="20px" align="center">
        <tr>
          <td><label>Student Name</label></td>
          <td><input type="text" id= "form1Text" name="name"></td>
        </tr>

        <tr>
          <td></td>
          <td align="right"><input type="button" value="SEND" onclick="sendData(form1)"></td>
        </tr>
      </table>
    </fieldset>
  </form>
</div>
<div class="right">
  <form>
    <fieldset>
      <legend>RECEIVE DATA</legend>
      <table border="1" cellpadding="20px">
        <tr>
          <td><label>Student Name</label></td>
          <td><label id="name"></label></td>
        </tr>
      </table>
    </fieldset>
  </form>
</div>

Answer 2

<input type="button" value="SEND" onclick="sendData('form1')">

Здесь вы вызываете функцию sendData с формой1, переданной в виде строки.

function sendData(f1) {
  document.getElementById('name').innerHTML = f1.name.value;
}

Внутри функции sendData вы пытаетесь обработать полученную строку как переменную.

Исправление очень простое.

<input type="button" value="SEND" onclick="sendData(form1)">