Fatal编程技术网
  • javascript/
  • Javascript 如何使多个表单输入显示在另一个HTML页面中？

Javascript 如何使多个表单输入显示在另一个HTML页面中？

javascript jquery html

Javascript 如何使多个表单输入显示在另一个HTML页面中？,javascript,jquery,html,sessionstorage,Javascript,Jquery,Html,Sessionstorage,我将要创建一个预订网页，如果我单击submit，它会将我指向一个名为REVIEW.HTML的文件，在该文件中，我的所有输入都会打印出来。 我这里有我的RESERVATION.HTML代码： function tosubmit() { localStorage.clear(); var SelectCountry = document.getElementById("SelectCountry").value; localStorage.setItem("Sel

我将要创建一个预订网页，如果我单击submit，它会将我指向一个名为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>

function to submit（）{
localStorage.clear（）；
var SelectCountry=document.getElementById（“SelectCountry”）.value；
localStorage.setItem（“SelectCountry”，SelectCountry.value）；
var SelectTime=document.getElementById（“SelectTime”）.value；
setItem（“SelectTime”，SelectTime）；
var datepicker=document.getElementById（“datepicker”）.value；
setItem（“日期选择器”，日期选择器）；
var Persons=document.getElementById（“Persons”）.value；
localStorage.setItem（“Persons”，Persons）；
返回true；
}
分支机构*
选择分支
芒果汉分店
达昂哈里分行
斯塔。罗莎
马科斯公路分公司
E.罗德里格斯
人数*
选择人数
1-2人
4-6人
8-10人
12-14人
14人及以上
开始时间*
选择时间
上午8:00
上午9:00
上午10:00
上午11:00
下午12:00
下午1:00
下午2:00
下午3:00
下午4:00
下午五点
下午6:00
晚上7:00
晚上8:00
晚上9:00
晚上10:00
晚上11:00
请求
日期*
我想在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>    


函数init（）{
var SelectCountry=localStorage.getItem（“SelectCountry”）；
var showTime=localStorage.getItem（“showTime”）；
var datepicker=localStorage.getItem（“datepicker”）；
var Persons=localStorage.getItem（“Persons”）；
文档。写入（“分支：\r\n”+选择国家+“\n时间：\r\n”+显示时间+“\n数据：\r\n”+日期选择器+“\n人员：\r\n”+人员）；
}

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

var SelectCountry = document.getElementById("SelectCountry").value;
localStorage.setItem("SelectCountry", SelectCountry.value);
或者将其更改为localStorage.setItem（“SelectCountry”，SelectCountry）

或者var SelectCountry=document.getElementById（“SelectCountry”）；

首先，请确保检查浏览器是否支持本地存储，如下所示：

if(typeof(Storage)! == undefined)
{
    // Supported
}
else
{
   // Not Supported
}
此外，button div及其子标记上有三个操作。我建议您将所有操作都放在一个函数中，因此您的html如下所示：

<div class="button" onclick='tosubmit();'><a style="text-decoration:none;" font-color="Black"><center>Reserve Now!</center></a></div>
我没有仔细查看，但这是一个问题
返回validateMyForm（）；tosubmit（）；
。当您使用
返回时，您正在退出该代码块，因此在本例中，
tosubmit（）；
永远不会执行。

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