We Keep Coding

How to show user all values selected after multi-step form

I am making a multistep form for a user to book a reservation. This form will let the user choose a few options at a time before submitting the form values to the database. I currently have the multistep form working through JS. I want to show all the values selected to the user one final time in the last ".input-group" Div labeled "Registration Confirm", and at this location they can submit the reservation after reviewing it is all correct. I am stuck on getting the final values to all show up in the last section however. I am aware the form is not done to be submitted to the database, I am trying to figure out how to show all the values before I go any further and do not mind if it is JS or Jquery.
I have tried saving the values to sessionStorage using this method for each option however it will not work. Dev tools is also telling me that no issues are arrising when I used this method so I am a bit stuck as nothing is showing up in the final div.
const destination = document.getElementById('result-destination').value;
sessionStorage.setItem("DESTINATION", destination);
const destinationChoice = sessionStorage.getItem('DESTINATION');
document.getElementById('choiceDestination').innerHTML = destinationChoice;
form.html
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="destination-choice select" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="room-choice select" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" id="result-checkin" />
<input type="date" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="guestNumber select" id="guestNumber" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
form.js
const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");
let formStepsNum = 0;
nextBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum++;
updateFormSteps();
updateProgressbar();
});
});
prevBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum--;
updateFormSteps();
updateProgressbar();
});
});
function updateFormSteps() {
formSteps.forEach((formStep) => {
formStep.classList.contains("form-step-active") &&
formStep.classList.remove("form-step-active");
});
formSteps[formStepsNum].classList.add("form-step-active");
}
function updateProgressbar() {
progressSteps.forEach((progressStep, idx) => {
if (idx < formStepsNum + 1) {
progressStep.classList.add("progress-step-active");
} else {
progressStep.classList.remove("progress-step-active");
}
});
const progressActive = document.querySelectorAll(".progress-step-active");
progress.style.width =
((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}
form.css
/* Progress Bar Start */
.progressbar {
position: relative;
display: flex;
justify-content: space-around;
counter-reset: step;
margin: 0.5rem 0rem 0.5rem;
width: 50%;
}
.progressbar::before,
.progress {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 100%;
background-color: #dcdcdc;
z-index: -1;
}
.progress {
background-color: var(--primary-color);
width: 0%;
transition: 0.3s;
}
.progress-step {
width: 2.5rem;
height: 2.5rem;
background-color: #dcdcdc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.progress-step::before {
counter-increment: step;
content: counter(step);
}
.progress-step::after {
content: attr(data-title);
position: absolute;
top: calc(100% + 0.5rem);
font-size: 0.85rem;
color: #666;
}
.progress-step-active {
background-color: var(--highlight-yellow);
color: #f3f3f3;
}
/* Progress Bar End */
/* Form Start */
.form-step {
display: none;
transform-origin: top;
animation: animate .5s;
}
label {
color: var(--wei);
}
.form-step-active {
display: block;
}
.input-group {
margin: 2rem 0;
}
#keyframes animate {
from {
transform: scale(1, 0);
opacity: 0;
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
/* Form End */
.registerForm {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#registrationTitle {
margin-top: 10px;
font-size: var(--font-size-24);
display: flex;
align-items: center;
justify-content: center;
color: var(--highlight-yellow);
font-family: var(--font-family-ubuntu);
font-weight: 400;
}
/* Buttons Start */
.btns-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.btn {
font-size: var(--font-size-20);
padding: 0.75rem;
display: block;
text-decoration: none;
background-color: var(--background-grey);
color: var(--background-blue);
text-align: center;
border-radius: 0.25rem;
border-color: var(--text-color);
border-style: solid;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0 0 0 2px var(--highlight-yellow), 0 0 0 2px var(--highlight-yellow);
border-color: var(--background-blue);
color: var(--background-blue);
-webkit-text-stroke: .5px var(--highlight-yellow);
}
/* Buttons End */
Any help is appreciated. Thank you!

Here you go :
HTML :
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="user_change destination-choice select" data-name="choiceDestination" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="user_change room-choice select" data-name="choiceRoom" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" class="user_change" data-name="choiceCheckin" id="result-checkin" />
<input type="date" class="user_change" data-name="choiceCheckout" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" class="user_change" data-name="choiceName" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" class="user_change" data-name="choicePhone" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" class="user_change" data-name="choiceEmail" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="user_change guestNumber select" id="guestNumber" data-name="choiceGuests" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" class="user_change" data-name="choiceAmenities" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
Additional JS to Your JS :
// My Stuff
// Create an Empty Object
var the_data_obj = {};
// On change of input elements to update the object
$(".user_change").change(function(){
var changed_field = $(this).attr("data-name");
var changed_field_val = $(this).val();
the_data_obj[changed_field] = changed_field_val;
// Finally view the added stuff
$("#"+changed_field).text(changed_field_val);
console.log(the_data_obj);
});
What did i do..?
Added a new class user_change to every input you have there..
Added a new data attribute data-name to every input you have there..
Created a new Object.
On change of every input by user parsing the input field key by data-name and input field value by parsed data atrr.
Updated the same in new created Obj.
Printing the same value in the final div.
Here's the working JSFiddle for the same :
Ping me if you come across any issue.

display: flex & justify-content: space-evenly

guys.
Just a question about CSS and javascript.
I have this code but I need to make the input areas centered.
For some reason they are not aligned even with the same length.
I know that the text size effects the position of the flex, but I didn't understand how.
Sorry for the silly question, I'm just starting to learn it.
<div class="playersDiv">
<div class="players player1">
<h2>Player Name</h2>
<div class="showInput">
<input type="playerInput1" name="playerInput1" id="playerInput1">
<button class="addPlayerBtn">Add Player</button>
</div>
</div>
<div class="scoreDiv">
<p>Input below the quantity of each tile in the end of the game:</p>
<div class="scoreItem">
<h3>Forest</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Town</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Production</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Factory</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
</div>
</div>
.scoreItem{
display: flex;
justify-content: space-evenly;
margin: 0 auto 0.5rem auto;
height: 2rem;
}
#fnum {
margin: 0 1rem;
}

Firstly, the fnum id should be a unique ID for one element on the page. In this instance you should use classes instead of id:
<input type="number" name="fnum" class="fnum">
Then, in your css you should use . instead of #:
.fnum {
margin: 0 1rem;
}
The name attribute should also be unique, as this is the way you will access the data from your backend. e.g.
<input type="number" name="production-fnum" class="fnum">
<input type="number" name="factory-fnum" class="fnum">
Presuming the CSS you have is written in a separate .css file, or in tags.
The space-evenly attribute is affected by the width of the elements,
You can add a fixed width to the h3 and input elements with:
h3 {
width: 150px;
}
input {
width: 150px;
}
or, you can give each h3 element a class and add the style to that, and style the fnum class we created earlier e.g.
<h3 class="label">Factory</h3>
.label{width: 150px}
.fnum{width: 150px}
Also, I would use a label instead of h3 (https://www.w3schools.com/tags/tag_label.asp)

I can offer such a solution. Set this rule in your css:
.scoreItem h3 {
width: 90px;
}
Where width 90px is the width of the longest tag h3 - Production.
.scoreItem{
display: flex;
justify-content: space-evenly;
margin: 0 auto 0.5rem auto;
height: 2rem;
}
#fnum {
margin: 0 1rem;
}
.scoreItem h3 {
width: 90px;
}
<div class="playersDiv">
<div class="players player1">
<h2>Player Name</h2>
<div class="showInput">
<input type="playerInput1" name="playerInput1" id="playerInput1">
<button class="addPlayerBtn">Add Player</button>
</div>
</div>
<div class="scoreDiv">
<p>Input below the quantity of each tile in the end of the game:</p>
<div class="scoreItem">
<h3>Forest</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Town</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Production</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
<div class="scoreItem">
<h3>Factory</h3>
<input type="number" name="fnum" id="fnum">
<p>10</p>
</div>
</div>
</div>

How to align html form inputs and contents spacing

How can i align spacing between form inputs, labels, text area and the received data from php. Which may have multiple lines of data to display. How can i achieve the auto arrangement of next elements if something is added in the middle.?
Here is the code: (How can to make auto arrangement? is there a better way achieving it than the below code? )
li{text-decoration:none; list-style-type:none; }
.left{ position:relative; left:100px;}
.right{ position:relative; left:200px;}
textarea{ position:relative; width:200px; height:70px; }
<html>
<body>
<br><br>
<form>
<ul>
<label class="left">Status:</label><li class="right"><textarea name="status"></textarea></li><br><br>
<label class="left">First name:</label><li class="right"><input type="text" name="firstname"></li><br><br>
<label class="left">Last name:</label><li class="right"><input type="text" name="lastname"></li><br><br>
<label class="left">Address:</label><li class="right"><textarea name="address"></textarea></li><br><br>
<label class="left">Address 2:</label><li class="right"><textarea name="address2"></textarea></li>
</ul>
</form>
</body>
</html>

You could solve just using CSS flexbox.
display: flex for each li, some flex-basis for each label (in this case 25% and add a class for each input (such as textarea, etc) with flex: 1.
document.querySelector('#add').addEventListener('click', function() {
var elem = document.createElement('li');
elem.innerHTML = '<label>Lorem Ipsum</label><input type="text" class="field" />';
document.querySelector('#list').appendChild(elem);
})
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
margin-bottom: .5em;
}
label {
flex: 0 0 25%;
text-align: right;
padding-right: 1em;
align-self: center;
}
.field {
flex: 1;
}
<ul id=list>
<li>
<label for=status>Status:</label>
<textarea class="field" id=status name="status"></textarea>
</li>
<li>
<label for=firstname>First name:</label>
<input class="field" id=firstname type="text" name="firstname">
</li>
<li>
<label for=lastname>Last name:</label>
<input class="field" id=lastname type="text" name="lastname">
</li>
<li>
<label for=address>Address:</label>
<textarea class="field" id="address" name="address"></textarea>
</li>
<li>
<label for=address2>Address 2:</label>
<textarea class="field" id="address2" name="address2"></textarea>
</li>
</ul>
<button id=add>Add</button>
Also added a for="..." attribute to have the right behaviour when click on a label (will focus on the related input).

How can i listen an input field for every alphabet

How can i listen every alphabet which typed into input-field dynamically? For example i would like to listen two input-fields same time and after every entry,take the label "body" and add pre and post chars to it and change the "change me"?
example : pre-chars+body+post-chars (needs to be dynamically)
<div style="width:300px;">
<input type="text" class="form-control" style="float:left; width:100px; margin: 10px; margin-left: 3px;" placeholder="post-Chars"></input>
<input type="text" class="form-control" style="float:left; width:100px; margin: 10px; margin-left: 3px;" placeholder="post-Chars"></input>
<div><label><br>body</br></label></div>
</div>
<p style="padding:10px;">change me !</p>
https://jsfiddle.net/x6ozddg6/
thanks !

Add names to your input and id's to part of your code to identify them easily in jquery:
<div style="width:300px;">
<input type="text" class="form-control" style="float:left; width:100px; margin: 10px; margin-left: 3px;" placeholder="post-Chars" name="pre-text"></input>
<input type="text" class="form-control" style="float:left; width:100px; margin: 10px; margin-left: 3px;" placeholder="post-Chars" name="post-text"></input>
<div><label id="body">body</label></div>
</div>
<p style="padding:10px;" id="change">change me !</p>
Than use jquery to do it... it's very simple:
$('input[name="pre-text"]').change(function(){
$('#change').html($(this).val() + $('#body').html() + $('input[name="post-text"]').val());
});
$('input[name="post-text"]').change(function(){
$('#change').html($('input[name="pre-text"]').val() + $('#body').html() + $(this).val());
});

aligning radio buttons within a div

This is my first attempt at using javscript with html/css. I have a button that when clicked shows a question, and three radio buttons. Everything so far so good, but I would like the radio buttons to be aligned with their actual button on the left (not the text). The content div is centered, so it seems like it is just centering the radio buttons to the page, but not relative to one another. I think if you take a look at my link you will understand:
Link to example page
Any ideas on how I can get the affect I am looking for here? Admittedly this is pretty clunky but baby steps :)
Here is my html:
<!-- Here is the main content -->
<div class="content">
<h1>Quiz With Javascript</h1>
<p>This is a simple quiz leveraging javascript.</p>
<div class="btn-group">
<input type="button" class="btn btn-primary btn-lg" onclick="showDiv()" value="Click Here For The Question" />
</div>
<div id="question1">
<h3>Where Does Phil Work?</h3>
<div>
<form>
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</form>
</div>
<script src="js/quiz.js"></script>
<script type="text/javascript">
function showDiv() {
document.getElementById('question1').style.display = "block";
}
</script>
</div>
Here is a snippet from my CSS:
body {
margin: 50px 0px;
padding: 0px;
background-color: #7FFFD4;
border-radius: 25px;
}
.content {
text-align: center;
}
input[type='radio']{
vertical-align: baseline;
padding: 10px;
margin: 10px;
}

form {
padding-left: 559px;
text-align: left;
}

Try this:
<form style="">
<div class="centerDiv">
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</div>
</form>
and the CSS:
.centerDiv {
display: inline-block;
margin: auto;
text-align: left;
}