Question

我已经建立了一个双重表单布局，一个挨着另一个，基本上，我正在尝试使第一个表单的输入数据最终出现在第二个表单的字段中。两种形式都在同一页面上，理想情况下，即使重新加载页面，第二种形式也会在接收到数据时存储数据。

我以为我已经完成了第一部分；当按下“发送”按钮时数据将发送到哪里，但是似乎我在某个地方出错了。

任何对我的错误的澄清，将不胜感激。

到目前为止，我已经尝试将JavaScript函数与GetElementById一起使用来发送输入。

以下是我的问题的一个示例：

我的目标是使用form1中的“发送”按钮在form2字段中显示输入，理想情况下，在关闭并重新进入页面后仍保留所述数据。

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

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

在这里，您要调用 sendData 函数，其中form1是作为字符串传递的。

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

但是在sendData函数内部，您试图将接收到的字符串视为变量。

修复很简单。

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

Answer 2

您正在将send1作为字符串在sendData函数中发送。而是发送不带引号的邮件。

或者您可以给您的文本字段一个ID，然后使用该ID检索数据。

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>

如何使用JavaScript修复错误的HTML表单？

2 个答案: