Have form load with previously chosen values on a different page, but load blank if this page is ope-CodePudding

I am making a reservation booking site and have 2 pages. My index.html page has 2 ways to access the bookroom.html page.

The first way is a regular link in the heading. When accessed this way, I want the bookroom.html page to load with a default heading reading "Room Details" and the form on it to load blank with no values chosen (where my current issue is).

The second way is a "Check Availability" section where the user can pre-select a destination, check-in, and check-out date. This section has a button which opens the bookroom.html page, and by using sessionStorage().getItem/setItem I am passing the details chosen here to the new form on the new bookroom.html page with the remaining form sections blank to be filled out.

My problem is that now that I have created the JS to pass the values to the bookroom.html page, I can no longer open the bookroom.html page on its own with the default heading and the destination showing its first value "placeholder". I am thinking this is because of the window.addEventListener being 'load' however I am stuck on if this is the issue and how to get around it.

index.html

<form action="./PreLogin/bookroom/bookroom.html" method="POST"  id="form">
            <!-- Destination Choice -->
            <div >
              <label for="" ></label>
              <select  id="destination" name="destination">
                <option value="Choose Destination" disabled selected hidden>Choose Destination</option>
                <option value="New York">New York</option>
                <option value="Florida">Florida</option>
                <option value="California">California</option>
                <option value="Texas">Texas</option>
              </select> 
            </div>
            <!-- Check In Choice -->
            <div >
              <label for="" >Check In</label>
              <input type="date"  id="checkin-date" name="checkin-date" min="2022-09-01">
            </div>
            <!-- Check Out Choice -->
            <div >
              <label for="" >Check Out</label>
              <input type="date"  id="checkout-date" name="checkout-date" min="2022-09-01">
            </div>
            <!-- Check Button -->
            <div >
              <button type="submit" form="form"  onclick="checkAvailability()" >Check Availability</button>
            </div>
</form>

index.js

function checkAvailability () {

    const destination = document.getElementById('destination').value;
    const checkin = document.getElementById('checkin-date').value;
    const checkout = document.getElementById('checkout-date').value;

    sessionStorage.setItem("DESTINATION", destination);
    sessionStorage.setItem("CHECKIN-DATE", checkin);
    sessionStorage.setItem("CHECKOUT-DATE", checkout);

    return;
}

bookroom.html

<!-- SUB HEADER (CHECK AVAILABILITY) START -->
      <div >
        <div >
          <h1  id="result-destination-header"> Room Details </h1>
        </div>
      </div>
<!-- SUB HEADER END -->

<form action="">
        <h1>
            Result Page
        </h1>
        <select  id="result-destination">
            <option value="Choose Destination" disabled selected hidden>Choose Destination</option>
            <option value="New York">New York</option>
            <option value="Florida">Florida</option>
            <option value="California">California</option>
            <option value="Texas">Texas</option> 
        </select> 
        <!-- <input type="text" id="result-name" /> -->
        <input type="date" id="result-checkin" />
        <input type="date" id="result-checkout" />
        <input type="text" id="result-name" placeholder="Enter Your Name..." />
</form>

bookroom.js

window.addEventListener('load', () => {
    
    const destination = sessionStorage.getItem('DESTINATION');
    const checkin = sessionStorage.getItem('CHECKIN-DATE');
    const checkout = sessionStorage.getItem('CHECKOUT-DATE');
    
    document.getElementById('result-destination-header').innerHTML = destination;
    document.getElementById('result-destination').value = destination;
    document.getElementById('result-checkin').value = checkin;
    document.getElementById('result-checkout').value = checkout;
})

CodePudding user response：

To check whether your bookroom.html page was accessed through the link in your index.html page, or not...

First add a checkavailability URL search/query string parameter to the index.html form action attribute:

<form action="book.html?checkavailability" method="POST"  id="form">

Then wrap your bookroom.js session variable form update code with a check for the existence of that parameter:

// GET LOCATION QUERY STRING OBJECT
const params = new URLSearchParams(location.search);

// CHECK FOR "checkavailability" QUERY STRING PARAMETER
if ( null !== params.get("checkavailability") ) { // yay, found it

    const destination = sessionStorage.getItem('DESTINATION');
    const checkin = sessionStorage.getItem('CHECKIN-DATE');
    const checkout = sessionStorage.getItem('CHECKOUT-DATE');
    
    document.getElementById('result-destination-header').innerHTML = destination;
    document.getElementById('result-destination').value = destination;
    document.getElementById('result-checkin').value = checkin;
    document.getElementById('result-checkout').value = checkout;
}

...using URLSearchParams(), location.search and the URLSearchParams method get().

Of course, the name checkavailability is simply a (user-friendly) suggestion—you can use any (variable name compliant) name you like.