On my website I have a Reservations page which is a form that a user fills out etc. and then JavaScript will validate it to see if it's okay before submission etc.
What I want is to copy the all the data that a user has entered in form, and when it is submitted the resulting "Thank You" page displays all the details the user has entered so that they may then print it out as a personal copy for themselves.
Doing my research, I came across this post: How to store form data in javascript for history use in another page or reopen page saying that you can use HTML5's Local Storage feature to store the data and then recall upon the data.
The problem is that I don't really understand how to use this and I don't fully understand the syntax for the ...("name", "Hello World!").
Furthermore, I don't also understand the Serialize function too.
<form name="bookingsform" method="POST" action="thankyou.html" onsubmit="return checkForm()" onreset="clearForm()">
<fieldset>
<legend>Contact Information</legend>
<p>
<label>First Name:</label>
<br>
<input type="text" name="firstname" onkeyup="checkFirstName()">
</p>
<div id="firsttext"></div>
<p>
<label>Last Name:</label>
<br>
<input type="text" name="lastname" onkeyup="checkLastName()">
</p>
<div id="lasttext"></div>
<p>
<label>Contact Telephone No.:</label>
<br>
<input type="tel" name="phonenumber" maxlength="11" onkeyup="checkTel()">
</p>
<div id="phonenumberwarn"></div>
<p>
<label>Contact Email Address:</label>
<br>
<input type="email" name="email" onkeyup="checkEmail()">
</p>
<div id="emailwarn"></div>
<p>
<label>When can we call you?:</label>
<br>
<input type="text" name="contactconvenience" placeholder="HH:MM or "anytime"" onkeyup="checkCallTime()">
</p>
<div id="callbackwarn"></div>
</fieldset>
<fieldset>
<legend>Party Information</legend>
<p>
<label>Select Your Party Size (Including Yourself):</label>
<br>
<select id="partysize" onchange="checkPartySize()">
<!-- The <select> tag creates a drop down menu. -->
<option value="0">-</option>
<option value="2">2</option>
<!-- The <option> tag creates one option for a user to choose from, the value attribute tells the form what the option means. One <option> tag creates one option. -->
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</p>
<div id="partywarn"></div>
<p>
<label>Dietary Specifics:</label>
<input type="checkbox" name="dietarySpecific" value="nutAllergy">
Nut Allergy
<!-- The 'checkbox' input type creates a check box for a user to click on, the input type can take a null value. -->
<input type="checkbox" name="dietarySpecific" value="glutenAllergy">
Gluten Allergy
<input type="checkbox" name="dietarySpecific" value="lactose">
Lactose Intolerance
<input type="checkbox" name="dietarySpecific" value="otherAllergy">
Other; Please Specify in Special Instructions
</p>
<p>
<label>Smoking or Non-Smoking:</label>
<input type="radio" name="smoking" value="1" onchange="checkRadio()">
Smoking
<!-- The 'radio' input type creates a radio button for a user to choose from, this cannot take a null value and one option must be selected. -->
<input type="radio" name="smoking" value="2" onchange="checkRadio()">
Non-Smoking
</p>
<div id="radiowarn"></div>
</fieldset>
<fieldset>
<legend>Event Information</legend>
<p>
<label>Date:</label>
<br>
<input type="text" id="date" placeholder="DD/MM/YYYY" onkeyup="checkDate()">
<!-- The 'number' input type tells the form that the field can only take numbers. The 'date' input type creates a warning on the W3 Validator because not all web browsers support the input type. -->
</p>
<div id="datewarn"></div>
<p>
<label>Time:</label>
<br>
<select id="time" onchange="checkTime()">
<!-- This <select> tag creates another drop down list full of times. -->
<option value="0">-</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
<option value="24:00">24:00</option>
</select>
</p>
<div id="timewarn"></div>
<p>
<label>Special Instructions:</label>
<br>
<textarea name="specialInstructions" rows="10" cols="50"></textarea>
<!-- The <textarea> tag creates a text box for a user to type into. The rows attribute tells the form the number of rows the text box can take, and the cols attribute tells the form the number of columns the text box can take. -->
</p>
<p>
<input class="i1" type="reset" value="Reset Form">
<!-- The 'reset' input type tells the form to create a reset button to which a user can click on to reset all the fields. -->
<input class="i1" type="submit" value="Submit Form">
<!-- The 'submit' input type tells the form to create a submit button to which a user can click to submit the details they have filled in. -->
</p>
</fieldset>
</form>
Below is the JavaScript which validates the form:
var retext = /^[a-zA-Z]+$/; //regex variable to check if text field only contain alpha characters.
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; //regex variable to check if email field consists of all the characters needed for a valid email.
var rephonenumber = /^(\d{10,11})+$/; //regex variable to check if phonenumberephone field consists of only numbers and from 10 - 11 characters.
var callback = /^\d{2}:\d{2}|\s*anytime\s*$/;
var redate = /(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/](19|20)\d\d/;
function checkForm() {
var valid = true;
var radios = document.getElementsByName("smoking");
if (!retext.test(document.bookingsform.firstname.value)) {
document.bookingsform.firstname.style.border = "1px solid red";
document.getElementById("firsttext").innerHTML = "Invalid first name.";
document.bookingsform.firstname.title = "Please enter your first name.";
document.getElementById("firsttext").style.display = "block";
valid = false;
} else {
document.bookingsform.firstname.style.border = "1px inset #EBE9ED";
document.bookingsform.firstname.style.borderRadius = "2px";
document.getElementById("firsttext").style.display = "none";
}
if (!retext.test(document.bookingsform.lastname.value)) { //Using if statement which tests the user's input and see if it doesn't match the regex variable retext - if argument is true, it proceeds to the code within the braces
document.bookingsform.lastname.style.border = "1px solid red"; //Targetting the border style of input named "name" and giving it a red border to show the error.
document.getElementById("lasttext").innerHTML = "Invalid last name."; //Targets the div element id'd "text" and displays the text "Invalid text."
document.bookingsform.lastname.title = "Please enter your last name.";
document.getElementById("lasttext").style.display = "block"; //Sets the display style of the div to block.
valid = false; //Changes the value of the variable to false.
} else {
document.bookingsform.lastname.style.border = "1px inset #EBE9ED"; //If the user's input DOES match the regex variable retext it will take away the red border and the error message.
document.bookingsform.lastname.style.borderRadius = "2px";
document.getElementById("lasttext").style.display = "none";
}
if (!re.test(document.bookingsform.email.value)) {
document.bookingsform.email.style.border = "1px solid red";
document.getElementById("emailwarn").innerHTML = "Invalid email.";
document.bookingsform.email.title = "Please enter an email address.";
document.getElementById("emailwarn").style.display = "block";
valid = false;
} else {
document.bookingsform.email.style.border = "1px inset #EBE9ED";
document.bookingsform.email.style.borderRadius = "2px";
document.getElementById("emailwarn").style.display = "none";
}
if (!rephonenumber.test(document.bookingsform.phonenumber.value)) {
document.bookingsform.phonenumber.style.border = "1px solid red";
document.getElementById("phonenumberwarn").innerHTML = "Invalid phone number.";
document.bookingsform.phonenumber.title = "Please enter a phone number.";
document.getElementById("phonenumberwarn").style.display = "block";
valid = false;
} else {
document.bookingsform.phonenumber.style.border = "1px inset #EBE9ED";
document.bookingsform.phonenumber.style.borderRadius = "2px";
document.getElementById("phonenumberwarn").style.display = "none";
}
if (!callback.test(document.bookingsform.contactconvenience.value)) {
document.bookingsform.contactconvenience.style.border = "1px solid red";
document.getElementById("callbackwarn").innerHTML = "Enter a time in the format HH:MM or type \"anytime\".";
document.bookingsform.contactconvenience.title = "Please enter a time in the format HH:MM or type \"anytime\".";
document.getElementById("callbackwarn").style.display = "block";
valid = false;
} else {
document.bookingsform.contactconvenience.style.border = "1px inset #EBE9ED";
document.bookingsform.contactconvenience.style.borderRadius = "2px";
document.getElementById("callbackwarn").style.display = "none";
}
if (!(radios[0].checked || radios[1].checked)) {
document.getElementById("radiowarn").innerHTML = "Please select either Smoking or Non-Smoking.";
document.getElementById("radiowarn").style.display = "block";
valid = false;
} else {
document.getElementById("radiowarn").style.display = "none";
}
var idate = document.getElementById("date");
if (redate.test(idate.value)) {
if (isFutureDate(idate.value)) {
idate.style.border = "1px inset #EBE9ED";
idate.style.borderRadius = "2px";
document.getElementById("datewarn").style.display = "none";
} else {
idate.style.border = "1px inset #EBE9ED";
idate.style.borderRadius = "2px";
document.getElementById("datewarn").style.display = "none";
}
} else {
idate.style.border = "1px solid red";
document.getElementById("datewarn").innerHTML = "Enter a date in the format DD/MM/YYYY.";
idate.title = "Please enter a date in the format DD/MM/YYYY.";
document.getElementById("datewarn").style.display = "block";
valid = false;
}
var e = document.getElementById("time");
var strUser = e.options[e.selectedIndex].value;
if (strUser == 0) {
e.style.border = "1px solid red";
document.getElementById("timewarn").innerHTML = "Please select a time.";
e.title = "Please select a time.";
document.getElementById("timewarn").style.display = "block";
valid = false;
} else {
e.style.border = "1px inset #EBE9ED";
e.style.borderRadius = "2px";
document.getElementById("timewarn").style.display = "none";
}
var f = document.getElementById("partysize");
var strUser1 = f.options[f.selectedIndex].value;
if (strUser1 == 0) {
f.style.border = "1px solid red";
document.getElementById("partywarn").innerHTML = "Please select your party size.";
f.title = "Please select your party size.";
document.getElementById("partywarn").style.display = "block";
valid = false;
} else {
f.style.border = "1px inset #EBE9ED";
f.style.borderRadius = "2px";
document.getElementById("partywarn").style.display = "none";
}
return valid;
}
