How to execute a function and change pages onclick

February 16, 2021 by admin

So I have a button that submits a form. There’s also a JS function that formats and saves the user input in localStorage so as to display on the confirmation landing page.

The function works perfectly if I submit the form and then go to the confirmation page manually. However, I can’t make the button both execute the function and go to the confirmation page at the same time.

<button id="submitForm" onclick="getFormInputValues(); window.location.href='/common/confirmation.html'">Make Reservation</button>

For some reason I’m notunderstanding. When I click on the Make Reservation button, it does execute the function, but it doesn’t change the page. If I click a second time on the button, it does go to the confirmation page, but it doesn’t execute the function. If I type text in the fields before clicking the button, it just never works. It will only ever change pages if the function is unable to execute.

Thanks in advance for your help.

/* Booking Page */
var nameField = document.getElementById("nameInput");
var emailField = document.getElementById("emailInput");
var dateDayField = document.getElementById("day");
var dateMonthField = document.getElementById("month");
var dateYearField = document.getElementById("year");;
var timeHourField = document.getElementById("hour");
var timeMinuteField = document.getElementById("minute");
var timeAmPmField = document.getElementById("am-pm");
var numberOfPeopleField = document.getElementById("numberOfPeople");

/* Variables for local storage */
var storedName = localStorage.getItem("storedName");
var storedEmail = localStorage.getItem("storedEmail");
var storedDate = localStorage.getItem("storedDate");
var storedTime = localStorage.getItem("storedTime");
var storedNumberOfPeople = localStorage.getItem("storedNumberOfPeople");

/* Functions */
function getFormInputValues() {
  /* Name */
  nameFieldUserInput = nameField.value;
  localStorage.setItem("storedName", nameFieldUserInput);
  /* Email */
  emailFieldUserInput = emailField.value;
  localStorage.setItem("storedEmail", emailFieldUserInput);
  /* Date */
  dateUserInput = dateMonthField.value + "/" + dateDayField.value + "/" + dateYearField.value;
  localStorage.setItem("storedDate", dateUserInput)
  /* Time */
  timeUserInput = timeHourField.value + ":" + timeMinuteField.value + " " + timeAmPmField.value;
  localStorage.setItem("storedTime", timeUserInput);
  /* Guests Number */
  numberOfPeopleUserInput = numberOfPeopleField.value;
  localStorage.setItem("storedNumberOfPeople", numberOfPeopleUserInput);
};

function displayFormValues() {
  document.getElementById("nameDisplay").innerHTML = storedName;
  document.getElementById("emailDisplay").innerHTML = storedEmail;
  document.getElementById("dateDisplay").innerHTML = storedDate;
  document.getElementById("timeDisplay").innerHTML = storedTime;
  document.getElementById("numberOfPeopleDisplay").innerHTML = storedNumberOfPeople;
};