Displaying input value without a submit button to another page using javascript

Question

I am trying to display the result of an input value to another page. But this input does not have a submit button.

Thus, I am using keyup to store the input data.

I have 2 pages, index1.php and index2.php

index1.php:

<form>
    <input type="text" name="nameValidation" id="nameValidation" placeholder="Name">
    </form>

    <div id="display"></div>
    <script>
        $(function() {
            $('#nameValidation').keyup(function() {
                var nameValisession = $('#display').text($(this).val());
                sessionStorage.setItem("nameValiSession", nameValisession);
            }); 
        }); 
    </script>

So, what I am doing here is that I am using the keyup function to get the latest result and storing it as a variable. And then, I am assigning that variable into a sessionStorage.

index2.php:

    <div id="display"></div>
    <script>
    var nameValisession = sessionStorage.getItem("nameValiSession");
    document.getElementById("display").innerHTML = nameValisession;
    </script>

Here, I am just trying to retrieve the value of the variable nameValisession

However, this is not working for me. How do I go about sending the input value from index1.php to index2.php?

In the tutorial website (example 1) , it works perfectly for me when I tried their code.

Javascript in Page 1:
var favoritemovie = "Shrek";
sessionStorage.setItem("favoriteMovie", favoritemovie);

Javascript in Page 2:
var favoritemovie = sessionStorage.getItem("favoriteMovie");
console.log(favoritemovie);

So, can someone point me in the right direction on how to go about fixing the problem?

Rory McCrossan · Accepted Answer · 2019-08-23T09:51:08.057

2

The problem is because nameValisession will hold a jQuery object, as that's what's returned from text(), not the actual text value itself, and you cannot place objects in to localStorage. To fix this separate the variable declaration and text update steps.

I'd also suggest using the input event instead of keyup, as it also captures content added via the mouse:

$(function() {
  $('#nameValidation').on('input', function() {
    var nameValisession = $(this).val();
    $('#display').text(nameValisession);
    sessionStorage.setItem("nameValiSession", nameValisession);
  }); 
});

edited Aug 23 '19 at 09:51

answered Aug 23 '19 at 09:44

Rory McCrossan

331,213
40
305
339

I tried this, but it still doesn't fetch the result to `index2.php` – Gosi Aug 23 '19 at 09:48
Whoops, thanks :) Have you checked in dev tools to ensure the value has been set in localstorage? – Rory McCrossan Aug 23 '19 at 09:51
It doesn't record in the console, you need to check local data in dev tools. This is what it looks like in Chrome: https://i.imgur.com/HKsRHpT.png – Rory McCrossan Aug 23 '19 at 09:57
Rory, yes I noticed that in `index1.php`, I have that value. But in `index2.php` , it is not there. – Gosi Aug 23 '19 at 10:01
I tried again, yes it does save the value in `index1.php`, but not at `index2.php` – Gosi Aug 23 '19 at 10:03
Have you disabled session storage then, as that's not how it works. Are `index1.php` and `index2.php` on the same domain? – Rory McCrossan Aug 23 '19 at 10:03
I am using localhost (xampp). They are in the same folder. – Gosi Aug 23 '19 at 10:04
I can't really be of any more assistance then I'm afraid as it should be working. If the value is set in sessionStorage it will be available to all pages on that same domain until the session ends. I cannot think of a reason, beyond a mistake somewhere, that this would not work. – Rory McCrossan Aug 23 '19 at 10:05
Later, in a few hours, I'll try this on a domain instead. Maybe its got to do with the localhost. If its all good, I'll vote your answer as correct. Thanks for your help Rory! – Gosi Aug 23 '19 at 10:08
Rory, I was testing it all wrong. Yes, your code works! – Gosi Aug 24 '19 at 04:11

Displaying input value without a submit button to another page using javascript

1 Answers1

Linked