'Passing Textbox Value to another page via JavaScript

I need to accomplish the follow:

  1. allow user to input data into a textbox attribute of form/input element
  2. 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)

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!

javascripthtml


Solution 1:[1]

It looks like you are missing 2 things:

  1. 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.
  2. 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>

Solution 2:[2]

You are storing the value in the localStorage before the user inputs any data in the input field hence empty value is stored.

You can do this to listen to Enter keypress before reading the value from input field.

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/

index.html

Click here to set a value to local storage and on submit you will be redirected to 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

It fetch data from local storage and alerts the value. On fetch we removed the data from the local storage localStorage.removeItem( 'objectToPass' );

If you go to redirect.html before the index.html the data will be 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.

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

Solution 3:[3]

You actually accomplish a big portion of what you need to do. You only need to add your onsubmit function;

<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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Burak Tokak

Related Questions