javascript - 在 HTML 页面之间传输数据似乎不起作用？

Question

我目前正在使用表单和 javascript 验证。我已经完成了大部分代码并处于最后一步，但是似乎无法正常工作并且不确定我做错了什么。之前在最后一部分上花费了数小时我寻求帮助。

基本上，用户将他们的信息输入到表单中，然后当他们单击“提交”时，信息得到验证，输入的信息移到确认页面上。目前我输入的输入不再得到验证并且是空白的确认页面..

第一个 HTML 注册页面

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

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;

确认 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 文件 2 将信息带入确认

 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

当您打开浏览器控制台时，应该可以清楚地看到一些语法错误:
- errMsg + tempMsg; 不是完整的语句，
- is(is10day) trip += ", 10day"; 无效，并且
- storeBooking 没有名为 partySize 的参数

我也看到了一些逻辑错误:
- checkSpeciesAge 永远不会像 validate 期望的那样返回空字符串，并且
- 尝试验证 partySize 的代码部分有几个错误(包括整个结构嵌套在年龄验证部分的 else block 中。)

一些 console.log 语句可以大大有助于识别您的变量在哪里包含您不期望的值，如果在更正这些问题后仍然有错误需要追踪的话。祝你好运!