Javascript 警报显示不正确

Question

有谁知道我该如何解决以下问题：我希望用户输入的表单在不同的 HTML 文件中得到提醒。

这是我到目前为止写的。它适用于名为 'name' 的 id，但我不知道为什么它不适用于 'position'。

"index.html" 文件:

<script>
    function myFunction() {
        name = document.getElementById("name").value;
        position = document.getElementById("position").value;

        window.location.replace("signature.html");
        return false;
    }
</script>

<form class="formulario" onsubmit="return myFunction()">
      Name: <input type="text" name="name" id="name"><br>
      Position:  <input type="text" name="position" id="position"><br>
      <br>
      <input type="submit" value="Generate Signature">
</form>

"signature.html" 文件 - 注意 alert(name) 和 alert(position) => alert(name) 有效，但 alert(position) 无效。我想了解如何解决这个问题。

<html>
<head>
</head>
<body>
<div class="signature_general">
    <div class = "signature_middle">
        <div id = "signature_details">
        <font size="2px">Regards,</font><br>
        <b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
        <font size="2px" id="posInput">Accounting Systems Team Leader</font>
        </div>
    </div>
</div>

<script>
    alert(name);
    alert(position);
</script>

</body>
</html>

非常感谢

编辑：我注意到我遇到了一个错误，其中 "position" 是 "undefined"。有人知道吗？

Answer 1

您在 index.html 中设置的名称与您在 signature.html 的警报中打印的名称不同。

您可以通过将两个地方的 name 重命名为 name2 来查看。

如果您想将这些变量从一个页面传递到另一个页面，我建议使用查询字符串 how to exchange variables between two HTML pages?

Answer 2

您可以将 html 文件更改为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<form class="formulario" action="signature.html" method="get">
      Name: <input type="text" name="name" id="name"><br>
      Position:  <input type="text" name="position" id="position"><br>
      <br>
      <input type="submit" value="Generate Signature">
</form> 
</body>
</html>

您的 signature.html 文件为：

<html>
<head>
</head>
<body>
<div class="signature_general">
    <div class = "signature_middle">
        <div id = "signature_details">
        <font size="2px">Regards,</font><br>
        <b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
        <font size="2px" id="posInput">Accounting Systems Team Leader</font>
        </div>
    </div>
</div>

<script>
  var values = window.location.search.substring(1).split('&')
  var name = values[0].split('=')[1]
  var position = values[1].split('=')[1]
  alert(name)
  alert(position)
</script>

</body>
</html>

Javascript 警报显示不正确

Javascript alert not displaying correctly

javascript

alerts