How can I make several FORM input appear in another HTML Page?

StackOverflow https://stackoverflow.com/questions/21995079

Question

I am about to create a Reservation webpage wherein if i click submit, it'll direct me to a file called REVIEW.HTML where all of my inputs are printed. I have here my RESERVATION.HTML code: 

 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>

And I want to show all my form inputs here in REVIEW.HTML file: but then it gives a value of "null. How to do this right?? Thanks for the help

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

Was it helpful?

Solution

First of all, make sure to check if the browser supports local storage like so:

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

Also, you have three operations on the button div and its child tag. I recommend that you put it all in one function, so your html would look like this:

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

And then your OnSubmit function can handle the validation, local storage and navigation like so:

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

OTHER TIPS

You're storing .value of the .value string you've set the reference to.

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

either change it to localStorage.setItem("SelectCountry",SelectCountry);

or var SelectCountry = document.getElementById("SelectCountry");

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top