2014-02-24 65 views
0

我即將創建一個預訂網頁,其中如果我點擊提交,它會將我引導至名爲REVIEW.HTML的文件,在該文件中打印我的所有輸入。 我這裏有我的RESERVATION.HTML代碼:如何讓多個FORM輸入出現在另一個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>  

+0

我沒有仔細看過,但這是一個問題'return validateMyForm(); tosubmit();'。當你使用'return'時,你正在退出那個代碼塊,所以在這種情況下'tosubmit();'不會執行。 –

回答

0

首先,一定要檢查瀏覽器是否支持像這樣的本地存儲:

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

你存儲.value的你設置的參考.value的字符串。

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

將其更改爲localStorage.setItem(「SelectCountry」,SelectCountry);

或var SelectCountry = document.getElementById(「SelectCountry」);

相關問題