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

dluptydi 于 2023-04-28 发布在 Java

关注(0)|答案(3)|浏览(149)

我需要完成以下工作：
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>

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

JavaScript

来源：https://stackoverflow.com/questions/41450815/passing-textbox-value-to-another-page-via-javascript

3条答案

按热度按时间

soat7uwm1#

看起来你错过了两件事：
1.当表单被提交时，你需要得到文本框的值。现在，您正在尝试在页面加载时立即获取值，该值（此时）将不包含值。
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>

赞(0）回复(0）举报 2023-04-28

kd3sttzy2#

在用户在输入字段中输入任何数据之前，您将值存储在localStorage中，因此存储空值。
您可以这样做，以便在从输入字段读取值之前收听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();
     }
});

您还可以向按钮添加一个单击侦听器来侦听单击并从输入字段中获取值。

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' );中删除数据
如果在index.html之前转到redirect.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>

赞(0）回复(0）举报 2023-04-28

xzabzqsa3#

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

赞(0）回复(0）举报 2023-04-28

我来回答

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

3条答案

相关问题

热门标签

最新问答