How to execute a function and change pages onclick

by

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;
};

1 thought on “How to execute a function and change pages onclick”

  1. You shouldn’t be setting up a click event handler for the submit button because when a submit button is clicked, it automatically invokes the submit event for the form that button is associated with.

    You should be setting up a submit event handler for the form. The navigation to the confirmation page is automatically handled by that URL being set as the form element’s action method value.

    // Set up a "submit" event on the <form>
document.querySelector("form").addEventListener("submit", function(event){
   // Write to localStorage (won't work here in SO)
   localStorage.setItem("name", document.querySelector("input"));
});
    <form action="https://www.example.com" method="post">
  Name: <input>

  <button>Submit</button>
</form>
    Reply

Leave a Comment