Question

我即将创建一个预订网页，如果我点击提交，它会将我引导到一个名为REVIEW.HTML的文件，其中我的所有输入都会打印出来。我在这里有我的RESERVATION.HTML代码：

 function tosubmit() {
     localStorage.clear();  
     var SelectCountry = document.getElementById("SelectCountry").value;
     localStorage.setItem("SelectCountry", SelectCountry.value);

     var SelectTime = document.getElementById("SelectTime").value;
     localStorage.setItem("SelectTime", SelectTime);

     var datepicker = document.getElementById("datepicker").value;
     localStorage.setItem("datepicker", datepicker);

     var Persons = document.getElementById("Persons").value;
     localStorage.setItem("Persons", Persons);

     return true;
}

<form>
    <div class="FrmName"><H4>Branch*</H4></div>
    <select id="SelectCountry">
        <option value="" selected='selected' disabled>Select Branch</option>
        <option value="Manggahan">Manggahan Branch</option>
        <option value="Daang-Hari">Daang-Hari Branch</option>
        <option value="Sta.Rosa">Sta. Rosa</option>
        <option value="Marcos Highway">Marcos Highway Branch</option>
        <option value="E.Rodriguez">E. Rodriguez</option>
    </select>
    <div class="FrmName"><H4>No. of Person/s*</H4></div>
    <select  id="Persons">
        <option value='' selected='selected' disabled>Select No. of        Person/s</option>
        <option value="1-2 PAX">1-2 PAX</option>
        <option value="4-6 PAX">4-6 PAX</option>
        <option value="8-10 PAX">8-10 PAX </option>
        <option value="12-14PAX">12-14 PAX</option>
        <option value="14 and Above PAX">14 and Above PAX</option>
    </select>
    <div class="FrmName"><H4>Starting Time*</H4></div>
    <select id="SelectTime">
        <option value='' selected='selected' disabled>Select Time</option>
        <option VALUE="08:00AM">08:00AM</option>
        <option VALUE="09:00AM">09:00AM</option>
        <option VALUE="10:00AM">10:00AM</option>
        <option VALUE="11:00AM">11:00AM</option>
        <option VALUE="12:00PM">12:00PM</option>
        <option VALUE="01:00PM">01:00PM</option>
        <option VALUE="02:00PM">02:00PM</option>
        <option VALUE="03:00PM">03:00PM</option>
        <option VALUE="04:00PM">04:00PM</option>
        <option VALUE="05:00PM">05:00PM</option>
        <option VALUE="06:00PM">06:00PM</option>
        <option VALUE="07:00PM">07:00PM</option>
        <option VALUE="08:00PM">08:00PM</option>
        <option VALUE="09:00PM">09:00PM</option>
        <option VALUE="10:00PM">10:00PM</option>
        <option VALUE="11:00PM">11:00PM</option>
    </select>
    <div class="FrmName"><H4>Requests</H4></div>
    <textarea rows="4" cols="46"></textarea>
    <div class="cal">
        <div class="FrmName"><h4>Date*</h4></div><input type="text" id="datepicker" />
    </div>
    <div class="slide"><img src="room.jpg"STYLE="height:330px; width:370px;">   
    <div class="button" onclick='return validateMyForm(); tosubmit();'>
        <a href="iRoom1.html" style="text-decoration:none;" font-color="Black"><center>Reserve Now!</center></a>
    </div>
    <div class="button2">
        <a href="ReservationSlide.html" style="text-decoration:none;" font-color="Black"><center> Cancel </center></a>
    </div>
</form>

我想在REVIEW.HTML文件中显示我的所有表单输入：但是它给出的值为“null。如何做到这一点？感谢您的帮助

 <html>
 <head>
 <script>
    function init() {
        var SelectCountry = localStorage.getItem("SelectCountry");
        var showTime = localStorage.getItem("showTime");
        var datepicker = localStorage.getItem("datepicker");
        var Persons = localStorage.getItem("Persons");

        document.write("Branch: \r\n"  +SelectCountry+ " \nTime: \r\n" +showTime+ " \nDate: \r\n" +datepicker+ " \nPersons: \r\n" +Persons);
    }
</script>
</head>

Answer 1

您正在存储您已设置引用的.value字符串的.value。

var SelectCountry = document.getElementById("SelectCountry").value;
localStorage.setItem("SelectCountry", SelectCountry.value);

将其更改为localStorage.setItem（“SelectCountry”，SelectCountry）;

或var SelectCountry = document.getElementById（“SelectCountry”）;

Answer 2

首先，请务必检查浏览器是否支持本地存储：

if(typeof(Storage)! == undefined)
{
    // Supported
}
else
{
   // Not Supported
}

此外，您对按钮div及其子标记有三个操作。我建议你把它全部放在一个函数中，所以你的html看起来像这样：

<div class="button" onclick='tosubmit();'><a style="text-decoration:none;" font-color="Black"><center>Reserve Now!</center></a></div>

然后你的OnSubmit函数可以处理验证，本地存储和导航，如下所示：

function tosubmit() {
    //if form is valid then 
        // Save data to local storage
        // navigate to next page
    // else 
        // Alert user that form is not valid
}

如何在另一个HTML页面中显示多个FORM输入？

2 个答案: