I have a registration page that uses firstname, email, password and confirm password, for my first name data i have it set up so it should then transfer to a second page and display "Welcome ___", but the data is not showing and is not in the URL (im using query strings). I would like to be able to keep all of my different special effects and have a second page with a welcoming.
display.html:
<form action="action.html" method="GET">
<form>
<div>
<p>
Full name: <span id="one">..</span>.
<input type="text" name="Welcome" id="firstname" placeholder="E.g. David Bowie" />
<script>
function inputAction() {
one.textContent = firstname.value;
}
firstname.oninput = inputAction;
let Firstnames = [];
const addFirstname = (ev)=>{
ev.preventDefault();
let firstname = {
id: Date.now(),
firstname: document.getElementById('firstname').value,
}
Firstnames.push(firstname);
document.forms[0].reset();
console.warn('added' , {Firstnames} );
let pre = document.querySelector('#msg pre');
pre.textContent = '\n' + JSON.stringify(Firstnames, '\t', 2);
localStorage.setItem('Firstname', JSON.stringify(Firstnames) );
}
document.addEventListener('DOMContentLoaded', ()=>{
document.getElementById('btn').addEventListener('click', addFirstname);
});
</script>
</div>
<div>
</p>
<label id="Email">Email</label></br>
<input type="email" placeholder="DavidBowie@gmail.com" id="Email" />
</p>
action.html:
<div id='write'>
<p>Welcome </p>
</div>
<script>
let args=new URLSearchParams( location.search );
if( args.has('Welcome') ){
document.getElementById('write').querySelector('p').textContent += args.get('Welcome');
}
</script>
