时间戳

首页 > 解决方案 > 如何从一个 HTML 表单获取“make”值到另一个？

javascript - 如何从一个 HTML 表单获取“make”值到另一个？

问题描述

我在我的 HTML 表单之间共享值时遇到问题。我是初学者，所以这可能是一个非常容易解决的问题。

新车.html：

<div class="input-group">
    <input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;"/>
</div>

项目1.html：

<label>Make: </label><li onclick="getMake()"></li></br>

新车.js：

function getMake(){
    var make = document.getElementById("inputMake").value;
}

我希望在 Newvehicle.html 上的文本字段中输入的值显示为 Item1.html 上的列表项。有人可以建议吗？

标签： javascripthtml

解决方案

您可以做的是，将值保存在 localStorage 中并在第二个文件中检索它。

一个可能的 HTML 解决方案是：

新车.html：

<div class="input-group">
   <input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;" onkeyup="localStorage.value1 = this.value" />
</div>

项目1.html：

<label>Make: </label><li id='entry_1'></li></br>
<script type="text/javascript">
            document.getElementById('entry_1').innerHTML = localStorage.value1;
</script>

新车.js：

这不是必需的，但是很高兴将整个逻辑放在一个单独的 JS 文件中

解释：

每次用户释放键盘上的键时都会触发 onkeyup 事件，因此每次触发时我们都会创建/替换 localStorage 中的 value1。

在列表元素之后将执行一个 javasript 代码，该代码在您的案例 value1 中从 localStorage 读取值并替换 innerHTML。

请记住，这仅在您在同一域上工作时才有效。Localstorage 保留数据，直到您使用 localStorage.clear() 清除本地存储

或者，您可以使用 sessionStorage 而不是 localStorage 只为一个浏览会话保留数据。

请参阅： W3C 学校的网络存储

继续前进，很快你就会掌握 Javasript 语言。

推荐阅读