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

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=""  name="bookform">
        <h1 id="registrationTitle">
            Book Your Stay!
        </h1>
        <!-- Progress bar -->
        <div >
          <div  id="progress"></div>
          <div  data-title="Room"></div>
          <div  data-title="Contact"></div>
          <div  data-title="Extras"></div>
          <div  data-title="Confirm"></div>
        </div>

        <div >
          <div >
            <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 >
            <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 >
            <input type="date" id="result-checkin" />          
            <input type="date" id="result-checkout" />
          </div>
          <div >
            <a  >Next</a>
          </div>
        </div>
        <div >
          <div >
            <label for="name">Name</label>
            <input type="text" name="name" id="name" />
          </div>
          <div >
            <label for="phone">Phone</label>
            <input type="text" name="phone" id="phone" />
          </div>
          <div >
            <label for="email">Email</label>
            <input type="text" name="email" id="email" />
          </div>
          <div >
            <a >Previous</a>
            <a  >Next</a>
          </div>
        </div>
        <div >
          <div >
            <label for="guestNumber">Number Of Guests</label>
            <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 >
            <label for="amenities">Amenities</label>
            <input type="number" name="amenities" id="amenities" />
          </div>
          <div >
            <a >Previous</a>
            <a  >Next</a>
          </div>
        </div>
        <div >
          <div >
            <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 >
            <a >Previous</a>
            <input type="submit" value="Submit"  />
          </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!

CodePudding user response：

Here you go :

HTML :

<form action=""  name="bookform">
        <h1 id="registrationTitle">
            Book Your Stay!
        </h1>
        <!-- Progress bar -->
        <div >
          <div  id="progress"></div>
          <div  data-title="Room"></div>
          <div  data-title="Contact"></div>
          <div  data-title="Extras"></div>
          <div  data-title="Confirm"></div>
        </div>

        <div >
          <div >
            <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 >
            <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 >
            <input type="date"  data-name="choiceCheckin" id="result-checkin" />          
            <input type="date"  data-name="choiceCheckout" id="result-checkout" />
          </div>
          <div >
            <a  >Next</a>
          </div>
        </div>
        <div >
          <div >
            <label for="name">Name</label>
            <input type="text"  data-name="choiceName" name="name" id="name" />
          </div>
          <div >
            <label for="phone">Phone</label>
            <input type="text"  data-name="choicePhone" name="phone" id="phone" />
          </div>
          <div >
            <label for="email">Email</label>
            <input type="text"  data-name="choiceEmail" name="email" id="email" />
          </div>
          <div >
            <a >Previous</a>
            <a  >Next</a>
          </div>
        </div>
        <div >
          <div >
            <label for="guestNumber">Number Of Guests</label>
            <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 >
            <label for="amenities">Amenities</label>
            <input type="number"  data-name="choiceAmenities" name="amenities" id="amenities" />
          </div>
          <div >
            <a >Previous</a>
            <a  >Next</a>
          </div>
        </div>
        <div >
          <div >
            <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 >
            <a >Previous</a>
            <input type="submit" value="Submit"  />
          </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.