Transferring data between HTML pages doesn't seem to work?

Question

I am currently working with forms and javascript validation.. i have completed most of my code and am on the last step however cant seem to get it working and not sure what ive done wrong.. spent hours on this last part before i looked for help.

basically a user inputs their information into a form and then when they click submit the information get validated, and the inputed info moves onto a confirmation page.. at the moment the input i put in doesnt get validated anymore and is blank in the confirmation page..

First HTML register page

 <form id="regform" method="post" action="confirm.html" 
 novalidate="novalidate">
 <fieldset id="person"> 
<legend>Your details:</legend>
<p><label for="firstname">Enter your first name</label>
    <input type="text" name="firstname" id="firstname" size="20"  
 />
</p>
<p><label for="lastname">Enter your last name</label>
    <input type="text" name="lastname" id="lastname" size="20"  />
 </p>    
<fieldset id="species">
    <legend>Species:</legend>
        <label for="human">Human</label>
        <input type="radio" name="species" id="human" 
 value="Human"/><br />
        <label for="dwarf">Dwarf</label>
        <input type="radio" name="species" id="dwarf" 
 value="Dwarf" /><br />
        <label for="elf">Elf</label>
        <input type="radio" name="species" id="elf" 
 value="Elf" /><br />
        <label for="hobbit">Hobbit</label>
        <input type="radio" name="species" id="hobbit" 
 value="Hobbit" /><br />
</fieldset>
<p><label for="age">Enter your age</label>
    <input type="text" id="age" name="age" size="5">
</p>


  </fieldset>
 <fieldset id="trip"> 
 <legend>Your trip:</legend>
<fieldset>
    <legend>Booking:</legend>
        <label for="1day">1 Day Tour - $200 </label>
        <input type="checkbox" name="1day" id="1day" 
value="1day" /><br />
        <label for="4day">4 Day Tour - $1500</label>
        <input type="checkbox" name="4day" id="4day" 
value="4day" /><br />
        <label for="10day">10 Day Tour - $3000</label>
        <input type="checkbox" name="10day" id="10day" 
 value="10day" /><br />
</fieldset>
<p>
    <label for="food">Menu preferences</label>
    <select name="food" id="food">
        <option value="none">Please select</option>
        <option value="lembas">Lembas</option>
        <option value="mushrooms">Mushrooms</option>
        <option value="ent">Ent Draft</option>
        <option value="cram">Cram</option>
    </select>
</p>
<p>
<label for="partySize">Number of Travellers</label>
        <input type="text" id="partySize" name="partySize" maxlength="3" 
size="3" />
</p>
</fieldset>
 <div id="bottom"> </div>
 <p><input type="submit" value="Book Now!" />
 <input type="reset" value="Reset" />
 </p>

Validation for Javascript

    function validate() {

var errMsg = "";
var result = true;

var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;



if (!firstname.match(/^[a-zA-Z]+$/)) {
    errMsg = errMsg + "Your first name must only contain alpha characters\n";
    result = false; 
}

if (!lastname.match(/^[a-zA-Z+$]/)) {
    errMsg = errMsg + "Your last name must only contain alpha characters\n";
    result = false;
}

var age = document.getElementById("age").value;

if (isNaN(age)) {
    errMsg = errMsg + "your age must be a number\n";
    result = false;
}

     else if (age < 18) {
    errMsg = errMsg + " your age must be 18 or older\n";
    result = false;
}
     else if (age >= 10000) {
    errMsg = errMsg + "your age must be between 18 and 10000\n";
    result = false;
}
    else {
        var tempMsg = checkSpeciesAge(age);
        if (tempMsg != "") {
            errMsg + tempMsg;
            result = false;
        } 

        var partySize = document.getElementById("partySize").value;


        if (isNaN(partySize)) {
            errMsg = errMsg + "your age must be a number\n";
            result = false;
     }
            else if (partySize < 1) {
            errMsg = errMsg + " party size must be greater than 0\n";
            result = false;
        }
            else if (age >= 100) {
            errMsg = errMsg + "your party size must be less or equal to 100\n";
            result = false;
        }

    }

var is1day = document.getElementById("1day").checked;
var is4day = document.getElementById("4day").checked;
var is10day = document.getElementById("10day").checked;


if (!(is1day || is4day || is10day)) {
    errMsg = errMsg + "please select at least one trip.\n";
    result = false;
}


if (document.getElementById("food").value == "none") {
    errMsg = errMsg + "You must select a food preference. \n ";
    result = false;
}

var human = document.getElementById("human").checked;
var dwarf = document.getElementById("dwarf").checked;
var elf = document.getElementById("elf").checked;
var hobbit = document.getElementById("hobbit").checked;

if (!(human || dwarf || elf || hobbit)) {
    errMsg = errMsg + "please select a spiecies";
    result = false;
}





if (errMsg !== "") {
    alert(errMsg);
}

if (result) {
    storeBooking(firstname, lastname, age, species, is1day, is4day, is10day);
}

return result;
}

 function getSpecies() {

var speciesName = "Unknown";

var speciesArray = document.getElementById("species").getElementsByTagName("input");

for (var i = 0; i < speciesArray.length; i++){
    if (speciesArray[i].checked)
        speciesName = speciesArray[i].value;
} 
return speciesName;
}



  function checkSpeciesAge(age) {

var errMsg = "";
var species = getSpecies();
switch(species){
    case "human":
        if (age > 120) {
            errMsg = "you cannot be a Human and over 120. \n";  
        }
        break;
    case "dwarf":
    case "hobit": 
        if (age > 150 ){
            errMsg = " YOu can not be a " + species + " and over 150 .\n ";
        }
        break;
    case "elf":
        break;

    default: 
        errMsg = " we dont allow your kind on our tours. \n";

        }
        return errMsg;
}

   function storeBooking(firstname, lastname, age, species, is1day, is4day, is10day){

var trip= "";
if(is1day) trip ="1day";
if(is4day) trip +=", 4day";
is(is10day) trip += ", 10day";
sessionStorage.trip = trip;
sessionStorage.firstname= firstname;
sessionStorage.lastname= lastname;
sessionStorage.age = age;
sessionStorage.species= species;
sessionStorage.partySize= partySize;
sessionStorage.food = food;


alert ("Trip stored: " + sessionStorage.trip); 


}

  function init() {
     var regForm = document.getElementById("regform");
regForm.onsubmit = validate;
}
 window.onload = init;

Confirm HTML

 <form id="bookform">
<fieldset>
    <legend>Your Booking</legend>
    <p>Your Name: <span id="confirm_name"></span></p>
    <p>Species: <span id="confirm_species"></span></p>
    <p>Age: <span id="confirm_age"></span></p>
    <p>Trips booked: <span  id="confirm_trip"></span></p>
    <p>Food Preference: <span  id="confirm_food"></span></p>
    <p>Number of beings: <span  id="confirm_partySize"></span></p>
    <p>Total Cost: $<span  id="confirm_cost"></span></p>
    <input type="hidden" name="firstname" id="firstname" />
    <input type="hidden" name="lastname" id="lastname" />
    <input type="hidden" name="age" id="age" />
    <input type="hidden" name="species" id="species" />
    <input type="hidden" name="trip" id="trip" />
    <input type="hidden" name="food" id="food" />
    <input type="hidden" name="partySize" id="PartySize" />
    <input type="hidden" name="cost" id="cost" />



    <p><label for="date">Preferred Date</label>
        <input type="text" id="date" name="bookday" required="required" placeholder="dd/mm/yyyy" pattern="\d{1,2}/\d{1,2}/\d{4}" title="Format dd/mm/yyyy" maxlength="10" size="10" />
    </p>
    <input type="submit" value="Confirm Booking" />
    <button type="button" id="cancelButton">Cancel</button>
</fieldset>

Javascrips file 2 to bring the info over to the confirmation

 function validate(){

var errMsg = "";                                
var result = true;                              


return result;    


 function calcCost(trips, partySize){
var cost = 0;
if (trips.search("1day") != -1) cost = 200;
if (trips.search("4day")!= -1) cost += 1500;
if (trips.search("10day")!= -1) cost += 3000;
return cost * partySize;
}

  function getBooking(){
var cost = 0;
if(sessionStorage.firstname != undefined){    
    //confirmation text
    document.getElementById("confirm_name").textContent = sessionStorage.firstname + " " + sessionStorage.lastname;
    document.getElementById("confirm_age").textContent =sessionStorage.age;
    document.getElementById("confirm_trip").textContent = sessionStorage.trip;
    document.getElementById("confirm_species").textContent = sessionStorage.species;
    document.getElementById("confirm_food").textContent =sessionStorage.food;
    document.getElementById("confirm_partySize").textContent = sessionStorage.partySize;
    cost = calcCost(sessionStorage.trip, sessionStorage.partySize);
    document.getElementById("confirm_cost").textContent = cost;
    //fill hidden fields
    document.getElementById("firstname").value = sessionStorage.firstname;

    document.getElementById("lastname").value = sessionStorage.lastname;

    document.getElementById("age").value = sessionStorage.age;

    document.getElementById("species").value = sessionStorage.species;

    document.getElementById("food").value = sessionStorage.food;

    document.getElementById("partySize").value = sessionStorage.partySize;

    document.getElementById("cost").value = cost;
}

}


   function init () {

var bookForm = document.getElementById("bookform");
bookForm.onsubmit = validate; 



  }

 window.onload = init;

Answer 1

There are a couple of syntax errors that should be clearly visible when you open your browser console:
- errMsg + tempMsg; is not a complete statement,
- is(is10day) trip += ", 10day"; is not valid, and
- storeBooking doesn't have a parameter called partySize

I see a couple of logic errors too:
- checkSpeciesAge will never return an empty string as validate expects, and
- the section of code that attempts to validate partySize has several errors (including that this entire structure is nested inside the age-validation section's else block.)

A few console.log statements could go a long way toward identifying where your variables contain values that you don't expect if there are still bugs to track down after correcting these issues. Good luck!

Answer 2

I tried to fix this, and make some changes in your code. according to your requirement

follow the link of jsfiddle; https://jsfiddle.net/dupinderdhiman/vno15jku/32/

      <form id="bookform">
<fieldset>
    <legend>Your Booking</legend>
    <p>Your Name: <span id="confirm_name"></span></p>
    <p>Species: <span id="confirm_species"></span></p>
    <p>Age: <span id="confirm_age"></span></p>
    <p>Trips booked: <span  id="confirm_trip"></span></p>
    <p>Food Preference: <span  id="confirm_food"></span></p>
    <p>Number of beings: <span  id="confirm_partySize"></span></p>
    <p>Total Cost: $<span  id="confirm_cost"></span></p>
    <input type="hidden" name="firstname" id="firstname" />
    <input type="hidden" name="lastname" id="lastname" />
    <input type="hidden" name="age" id="age" />
    <input type="hidden" name="species" id="species" />
    <input type="hidden" name="trip" id="trip" />
    <input type="hidden" name="food" id="food" />
    <input type="hidden" name="partySize" id="PartySize" />
    <input type="hidden" name="cost" id="cost" />



    <p><label for="date">Preferred Date</label>
        <input type="text" id="date" name="bookday" required="required" placeholder="dd/mm/yyyy" pattern="\d{1,2}/\d{1,2}/\d{4}" title="Format dd/mm/yyyy" maxlength="10" size="10" />
    </p>
    <input type="submit" value="Confirm Booking"/>
    <button type="button" id="cancelButton">Cancel</button>
</fieldset>


<script>

sessionStorage.trip = "4day";
sessionStorage.firstname= "firstname";
sessionStorage.lastname= "lastname";
sessionStorage.age = 21;
sessionStorage.species= "species";
sessionStorage.partySize= 10;
sessionStorage.food = "food";


function validate(){

var errMsg = "";                                
var result = true;                              
return result;    
}

 function calcCost(trips, partySize){
var cost = 0;
if (trips.search("1day") != -1) cost = 200;
if (trips.search("4day")!= -1) cost += 1500;
if (trips.search("10day")!= -1) cost += 3000;
return cost * partySize;
}

function loadDataFromSession(){
var cost = 0;
if(sessionStorage.firstname != undefined){    
    //confirmation text
    document.getElementById("confirm_name").textContent = sessionStorage.firstname + " " + sessionStorage.lastname;
    document.getElementById("confirm_age").textContent =sessionStorage.age;
    document.getElementById("confirm_trip").textContent = sessionStorage.trip;
    document.getElementById("confirm_species").textContent = sessionStorage.species;
    document.getElementById("confirm_food").textContent =sessionStorage.food;
    document.getElementById("confirm_partySize").textContent = sessionStorage.partySize;
    cost = calcCost(sessionStorage.trip, sessionStorage.partySize);
    document.getElementById("confirm_cost").textContent = cost;
    //fill hidden fields
    document.getElementById("firstname").value = sessionStorage.firstname;

    document.getElementById("lastname").value = sessionStorage.lastname;

    document.getElementById("age").value = sessionStorage.age;

    document.getElementById("species").value = sessionStorage.species;

    document.getElementById("food").value = sessionStorage.food;

    document.getElementById("partySize").value = sessionStorage.partySize;

    document.getElementById("cost").value = cost;
}
}



   function init () {
   loadDataFromSession();
    var bookForm = document.getElementById("bookform");
        bookForm.onsubmit = validate; 
  }

 window.onload = init;


</script>

so what is the major change:

1. Created one function loadDataFromSession which call on init();
2. remove code from getBooking() add to loadDataFromSession .
3. now click on submit and your form will be submit