Question

我需要完成以下操作：

允许用户将数据输入到表单/输入元素的文本框属性
在用户输入数据并按回车键后，用户将被定向到显示输入数据的另一个页面

我有以下内容：（更愿意使用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>

我无法让这个工作，任何帮助将不胜感激！

Answer 1

看起来你错过了两件事：

您希望在提交表单时获取文本框值。现在，您试图在页面加载后立即获取值，这（在此时）不会包含值。
其次，您似乎没有重定向到第二页。

输入页面：

索引页面

<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>

重定向页面

重定向页面

<script>
  var inputTest = localStorage.getItem('objectToPass');
  var displayData = inputTest;
  alert('Inserted Data' + inputTest);

  localStorage.removeItem( 'objectToPass' ); // Clear the localStorage

</script>

Answer 2

在用户输入输入字段中的任何数据之前，您将值存储在localStorage中，因此存储了空值。

您可以在从输入字段读取值之前听取输入按键。

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();
     }
});

此外，您可以向按钮添加单击侦听器以侦听单击并从输入字段中获取值。

var inputTest = document.getElementById('userInput');
var add = document.getElementById('add');

add.addEventListener('click',function(e){
  store_data();
});

您可以存储此类数据

function store_data(){ // Store value from input field to local store
   localStorage.setItem( 'objectToPass', inputTest.value);
}

以下是一个示例：https://n-demo.000webhostapp.com/

index.html

Click here将值设置为本地存储，在提交时您将被重定向到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>

<强> redirect.html

从本地存储中获取数据并提醒值。在获取时，我们从本地存储localStorage.removeItem( 'objectToPass' );

中删除了数据

如果您在redirect.html数据index.html之前转到undefined。

注意：只有当重定向的网页位于同一个域中时，才能阅读本地存储。

如果从<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>

Answer 3

你实际上完成了你需要做的很大一部分。您只需要添加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>

这就是全部。

请参阅onsubmit事件监听器：http://www.w3schools.com/tags/ev_onsubmit.asp

通过JavaScript将文本框值传递到另一个页面

3 个答案: