Передача данных между HTML-страницами, похоже, не работает?

ProgramBox

Передача данных между HTML-страницами, похоже, не работает?

Post author:admin
Запись опубликована:19 апреля, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

В настоящее время я работаю с формами и проверкой 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 charactersn";
    result = false; 
}

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

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

if (isNaN(age)) {
    errMsg = errMsg   "your age must be a numbern";
    result = false;
}

     else if (age < 18) {
    errMsg = errMsg   " your age must be 18 or oldern";
    result = false;
}
     else if (age >= 10000) {
    errMsg = errMsg   "your age must be between 18 and 10000n";
    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 numbern";
            result = false;
     }
            else if (partySize < 1) {
            errMsg = errMsg   " party size must be greater than 0n";
            result = false;
        }
            else if (age >= 100) {
            errMsg = errMsg   "your party size must be less or equal to 100n";
            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 resu<
}

 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>

Javascripts file 2 для переноса информации в подтверждение

  function validate(){

var errMsg = "";                                
var result = true;                              


return resu<    


 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;

1. попробуйте отладить и проверить, как работает код

2. Я думаю, проблема в `document.getElementById («confirm_name»).textContent` это должно быть ` document.getElementById («confirm_name»).text`

3. нет, это не то @DupinderSingh

4. хорошо, я думаю, я понял: в функции function validate() 3-я строка говорит return result , но нет подсказки, куда вы вызываете свой function getBooking() .

5. Я думаю, что в confirm html при document ready вам следует вызвать getBooking()

Ответ №1:

Есть пара синтаксических ошибок, которые должны быть хорошо видны при открытии консоли браузера:
— errMsg tempMsg; не является полным выражением,
— is(is10day) trip = ", 10day"; недопустимо и
— storeBooking не имеет вызываемого параметра partySize

Я также вижу пару логических ошибок:
— checkSpeciesAge никогда не вернет пустую строку, как validate ожидается, и
— раздел кода, который пытается выполнить проверку, partySize содержит несколько ошибок (в том числе то, что вся эта структура вложена в else блок раздела проверки возраста.)

Несколько console.log инструкций могут помочь определить, где ваши переменные содержат значения, которые вы не ожидаете, если после исправления этих проблем все еще будут ошибки, которые нужно отследить. Удачи!

Ответ №2:

Я пытался это исправить и внести некоторые изменения в ваш код. согласно вашему требованию

перейдите по ссылке 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 resu<    
}

 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>

итак, в чем основное изменение:

Создал одну функцию loadDataFromSession , которая вызывает init();
удалите код из getBooking() добавления в loadDataFromSession .
теперь нажмите «Отправить», и ваша форма будет отправлена

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Управление набором веб-ключей Json в среде кластера

как установить окно gtk на закрепляемом уровне в wayland?

Как использовать AWS Amplify Auth Без AWS Cognito или пула пользователей AWS