从HTML表单获取值作为JavaScript变量

Question

我想捕获通过表单从一个页面发送到another.html页面的输入变量，并获取这些值作为JavaScript变量。 可以做到这一点。

这是我的表格；

<form action='another.html' id='form' data-ajax='false'>
<input id='sent_by' value='tom'/>
<input type='submit' value='Submit'/>
</form>

在我的another.html中，我尝试将值设为：

var sent_by = $.session.get("sent_by");

但是我无法获得这些价值。 感谢所有帮助。

Answer 1

您可以使用浏览器的localStorage实现此目的。 在提交并转到另一页面之前，将表单的所有值存储在localStorage中，您可以在另一页面上访问它：

Page1.html

字段名称=“名称” <input type="text" name="name" id="name" />

读取值并将其存储到localStorage

localStorage.setItem('name', document.getElementById('name').value);

等等。 您可以在JavaScript中创建一个函数，以便在提交之前将表单的所有字段保存在localStorage上。

要在另一页上读取这些值：

Page2.html键名存储的值可以使用以下JavaScript获取：

localStorage.getItem("name");

注意

page1.html和page2.html应该位于同一域中，以便您访问localStorage。

在https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/LocalStorage上了解有关本地存储的更多信息

Answer 2

您是否尝试过使用Window.localStorage ？ 它类似于sessionStorage但是没有到期日期。 因此，请确保在浏览会话结束后将其清除。

Answer 3

我认为@Shakti Phartiyal提供的答案可能是最实用的，也是我可能添加的一个甜头。 我写这篇文章的主要原因是因为我也花了很长时间使用javascript传递此类信息。 这让我感到困惑，因为您专用的javascript可以完成某些任务的PHP功能多么强大。 （是的，我知道有些JavaScript向导可以用它完成所有工作，我只是在谈论基本编程。） 因此，如果您想知道PHP传递这种方式的方式：

您修改后的html表单：

<form action='another.html' id='form' data-ajax='false' method='post'>
<input id='sent_by' value='tom' name='uname'/>
<input type='submit' value='Submit'/>
</form>

然后在“ another.php”中，您可以从表单中检索输入：

<?php
$uname= htmlspecialchars($_POST['uname'];
?>

大。 但是如何使这个php变量变成javascript？ 啊，有趣的部分。 您将使用php将javascript写入网页-您可以执行以下操作：

var uname = "<?php echo $uname; ?>";