时间戳

首页 > 解决方案 > 我在将数据推送到另一个 HTML 页面时遇到问题

javascript - 我在将数据推送到另一个 HTML 页面时遇到问题

问题描述

我无法让我的值转到另一个 html 页面。我验证了字段，填写完字段后，我们单击保存数据不会转到新的 html。

在新的 html 中只显示 Welcome。

这是我们第一个输出名字的 HTML

function parse() {
  var n = document.getElementById("nam").value;
  localStorage.setItem("textvalue", n);
  return false;

}

function validations(form) {
  function trimfield(str) {
    return str.replace(/^\s+|\s+$/g, '');
  }

  var errors = [];
  var n = document.getElementById("nam").value;
  if (n == "") {
    errors.push("Enter Name \n");
  }

  if (errors.length > 0) {
    var msg = "Errors : \n\n";
    for (var i = 0; i < errors.length; i++) {
      msg = msg + errors[i];
    }
    alert(msg);
    return false;
  }
}
<!DOCTYPE HTML >
<html>

<head>
  <title> User Registration Page</title>
  <link href="UserRegistration.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <form action="UserInfo.html" method="POST" onsubmit="return validations(this);" onsubmit="return parse();">
    <div class="name">
      Name : <input type="text" id="nam" name="fullName">
    </div>
  
  <button type="submit" class="btn btn-primary btn-lg">Save</button>
 </form>
</body>

</html>

这是我无法显示我的姓名（UserInfo.html）的第二个 html

<html> 
    <body> 
        Welcome : <span id= "result"> </span>
        <script>
        document.getElementById("result").innerHTML = localStorage.getItem("textvalue");


        </script>
    </body>
</html>

标签： javascripthtml

解决方案

不要使用两个 onsubmit 属性。将所有功能聚合到一个中，然后执行它。我已将解析函数与验证合并。这是同一件事。此外，您从未提交过表单。这就是为什么函数也不会被触发的原因。也使用提交按钮。它应该在表单标签内。不在外面

<!DOCTYPE HTML > 
<html>
<head> 
<title> User Registration Page</title>
<link href="UserRegistration.css" rel= "stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script>

function trimfield(str) { 
    return str.replace(/^\s+|\s+$/g,''); 
}
function validations(form) {
   var errors = [] ; 
   var n = document.getElementById("nam").value; 
   if (n == "") {
      errors.push("Enter Name \n"); 
   }

   if (errors.length > 0) {
       var msg = "Errors : \n\n" ; 
       for (var i = 0 ; i<errors.length; i++ ){ 
            msg = msg + errors[i]; 
       }
       alert(msg);
   }else{
       localStorage.setItem("textvalue", n); 
       alert(localStorage.getItem("textvalue"));
       return false;  
   }
}
</script>
</head>
<body>
   <form action="UserInfo.html" method="POST"  onsubmit="validations(this);">
       <div class = "name" >
        Name :   <input type ="text" id="nam" name="fullName" > 
       </div>
       <button type="submit" class="btn btn-primary btn-lg">Save</button>
    </form>
</body>
</html>

另外，不知道您在哪里调用修剪字段。在任何其他函数之外声明它并在任何你想要的地方使用它。

推荐阅读