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;
};
You shouldn’t be setting up a
click
event handler for thesubmit
button because when asubmit
button is clicked, it automatically invokes thesubmit
event for theform
that button is associated with.You should be setting up a
submit
event handler for theform
. The navigation to the confirmation page is automatically handled by that URL being set as theform
element’saction
method value.