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

vjsarlo 0
Viewed 45

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!

jquery javascript html
1 Answers

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.

Tech Stack by Antra0
Related