通过 JavaScript 将文本框值传递到另一个页面
[英]Passing Textbox Value to another page via JavaScript
问题描述
I need to accomplish the follow:
我需要完成以下工作：
- allow user to input data into a textbox attribute of form/input element允许用户将数据输入到表单/输入元素的文本框属性中
- after the user inputs the data and presses enter, the user is then directed to another page where the entered data is display在用户输入数据并按回车键后，用户将被定向到另一个显示输入数据的页面
I have the following: (would prefer to work with JS and HTML without involving PHP)我有以下内容：（更喜欢在不涉及 PHP 的情况下使用 JS 和 HTML）
Index Page:索引页：
<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>
Redirect Page:重定向页面：
<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>
I am unable to get this to work, any help would be appreciated!我无法让它工作，任何帮助将不胜感激！
3 个解决方案
解决方案1
0 2017-01-03 19:30:15
It looks like you are missing 2 things:看起来您缺少两件事：
- You'll want to get the textbox value when the form is submitted.您需要在提交表单时获取文本框值。 Right now, you are attempting to get the value as soon as the page loads, which (at that point) won't contain a value.现在，您正在尝试在页面加载后立即获取该值，该值（此时）将不包含值。
- Second, you don't seem to be doing any redirect to the second page.其次，您似乎没有重定向到第二页。
Input page:输入页面：
Index Page索引页
<body>
<form id="frmTest">
<input id = "userInput" type = "textbox" name = "firstName">
</form>
<script>
// Get a reference to the form so that we can set up an event handler
// for its submit event
var form = document.getElementById("frmTest");
// Now, set up a submit event handler for the form
form.addEventListener("submit", function(){
// Only when the form has been submitted do you want the textbox value
var inputTest = document.getElementById('userInput').value;
localStorage.setItem( 'objectToPass', inputTest );
window.location = "NEW URL";
});
</script>
</body>
Redirect Page:重定向页面：
Redirect Page重定向页面
<script>
var inputTest = localStorage.getItem('objectToPass');
var displayData = inputTest;
alert('Inserted Data' + inputTest);
localStorage.removeItem( 'objectToPass' ); // Clear the localStorage
</script>
解决方案2
0 2017-01-03 20:30:44
You are storing the value in the localStorage before the user inputs any data in the input field hence empty value is stored.在用户在输入字段中输入任何数据之前，您将值存储在 localStorage 中，因此存储空值。
You can do this to listen to Enter keypress before reading the value from input field.在从输入字段读取值之前，您可以这样做以收听Enter按键。
var inputTest = document.getElementById('userInput');
inputTest.addEventListener('keypress',function(key){ // Enter key Press Listener
key.which = key.which || key.keyCode;
if(key.which == 13) {
store_data();
}
});
Also you can add a click listener to the button to listen for click and fetch the value from the input field.您还可以向按钮添加一个单击侦听器以侦听单击并从输入字段中获取值。
var inputTest = document.getElementById('userInput');
var add = document.getElementById('add');
add.addEventListener('click',function(e){
store_data();
});
You can store data like this您可以像这样存储数据
function store_data(){ // Store value from input field to local store
localStorage.setItem( 'objectToPass', inputTest.value);
}
Here is an Example: https://n-demo.000webhostapp.com/这是一个示例： https : //n-demo.000webhostapp.com/
Click here to set a value to local storage and on submit you will be redirected to redirect.html单击此处将值设置为本地存储，提交时您将被重定向到redirect.html
<html>
<head>
<title> Index Page </title>
</head>
<body>
<form action="/redirect.html">
<input id = "userInput" type = "textbox" name = "firstName">
<button id='add'>Add to local storage</button>
</form>
</body>
<script>
var inputTest = document.getElementById('userInput');
document.getElementById('add').addEventListener('click',store_data); //Button Click Listener.
inputTest.addEventListener('keypress',function(key){ // Enter key Press Listener
key.which = key.which || key.keyCode;
if(key.which == 13) {
store_data();
}
});
function store_data(){ // Store value from input field to local store
localStorage.setItem( 'objectToPass', inputTest.value);
}
</script>
</html>
It fetch data from local storage and alerts the value.它从本地存储中获取数据并警告值。 On fetch we removed the data from the local storage localStorage.removeItem( 'objectToPass' );在获取时，我们从本地存储localStorage.removeItem( 'objectToPass' );删除了数据localStorage.removeItem( 'objectToPass' );
If you go to redirect.html before the index.html the data will be undefined .如果在index.html之前转到redirect.html数据将是undefined 。
Note: You can read the local storage only if the redirected page is on the same domain.注意：只有重定向页面在同一个域中，您才能读取本地存储。
if a value is set from <yor-domain>/index.html then only pages like <your-domain>/<some-page> can read the storage values.如果一个值是从<yor-domain>/index.html设置的，那么只有像<your-domain>/<some-page>可以读取存储值。
<html>
<head>
<title> Redirect Page </title>
</head>
<body>
<h1>In Redirected Page</h1>
<script>
var inputTest = localStorage['objectToPass'];
localStorage.removeItem( 'objectToPass' ); // Clear the localStorage
alert('Inserted Data ' + inputTest);
</script>
</body>
</html>
解决方案3
-1 2017-01-03 19:26:57
You actually accomplish a big portion of what you need to do.你实际上完成了你需要做的大部分工作。 You only need to add your onsubmit function;您只需要添加您的 onsubmit 功能；
<form onsubmit="submitHandler()">
<input id = "userInput" type = "textbox" name = "firstName">
</form>
<script>
function submitHandler(){
var inputTest = document.getElementById('userInput').value;
localStorage.setItem( 'objectToPass', inputTest );
// now redirect the page.
window.location.href = "redirect.html";
}
</script>
That's all.就这样。
See onsubmit event listener: http://www.w3schools.com/tags/ev_onsubmit.asp查看 onsubmit 事件监听器： http : //www.w3schools.com/tags/ev_onsubmit.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.