我需要完成以下工作:
1.允许用户将数据输入到表单/输入元素的文本框属性中
1.在用户输入数据并按下回车键之后,用户被引导到显示输入数据的另一页面
我有以下内容:(我更喜欢使用JS和HTML而不涉及PHP)
首页:
<html>
<head>
<title> Index Page </title>
</head>
<body>
<form>
<input id = "userInput" type = "textbox" name = "firstName">
</form>
<script>
var inputTest = document.getElementById('userInput').value;
localStorage.setItem( 'objectToPass', inputTest );
</script>
</body>
</html>
重定向页面:
<html>
<head>
<title> Redirect Page </title>
</head>
<body>
<script>
var inputTest = localStorage['objectToPass'];
localStorage.removeItem( 'objectToPass' ); // Clear the localStorage
var displayData = inputTest;
alert('Inserted Data' + inputTest);
</script>
</body>
</html>
我无法让这个工作,任何帮助将不胜感激!
3条答案
按热度按时间soat7uwm1#
看起来你错过了两件事:
1.当表单被提交时,你需要得到文本框的值。现在,您正在尝试在页面加载时立即获取值,该值(此时)将不包含值。
1.第二,你似乎没有做任何重定向到第二页。
输入页面:
索引页
重定向页面:
重定向页面
kd3sttzy2#
在用户在输入字段中输入任何数据之前,您将值存储在localStorage中,因此存储空值。
您可以这样做,以便在从输入字段读取值之前收听Enter键。
您还可以向按钮添加一个单击侦听器来侦听单击并从输入字段中获取值。
你可以这样存储数据
下面是一个例子:https://n-demo.000webhostapp.com/
index.html
Click here将值设置为本地存储,提交时将重定向到redirect.html
redirect.html
它从本地存储中获取数据并提醒值。在获取时,我们从本地存储
localStorage.removeItem( 'objectToPass' );
中删除数据如果在
index.html
之前转到redirect.html
,则数据将为undefined
。注意:只有当重定向页面位于同一个域时,您才能读取本地存储。
如果从
<yor-domain>/index.html
设置值,则只有像<your-domain>/<some-page>
这样的页可以读取存储值。xzabzqsa3#
你实际上完成了你需要做的很大一部分。你只需要添加你的onsubmit函数;
就这样
请参见onsubmit事件侦听器:http://www.w3schools.com/tags/ev_onsubmit.asp