When input form moving in another page output text?-CodePudding

When we have 2 page html how to input form in 1st page and output text in second page?

CodePudding user response：

I don't know if there is a way of doing it only with js

What you're trying to do is called two way data biding, Try learning Vue.js, Angular or React. It's pretty easy to do it on them.

CodePudding user response：

You can store values captured in a form usng Session Storage and read those values on the next page.

Page 1 :

<!DOCTYPE html>
<title> Input Page </title>
<form action="page2.html">
  <input type="text">
  <button> Submit </button>
</form>
<script>
  let f = document.querySelector('form');
  let i = document.querySelector('input');
  f.addEventListener('submit', event => {
    event.preventDefault();
    sessionStorage.setItem('yourKey', i.value)
    window.location = f.action;
  });
</script>

Page 2 :

<!DOCTYPE html>
<title> Output Page </title>
<span></span>
<script>
  let s = document.querySelector('span');
  s.textContent = sessionStorage.getItem('yourKey');
</script>

Data stored this way will remain until the browser session ends, meaning when all tabs to your domain are closed. If you need more persistent data there is also Local Storage that will survive across browser sessions.