How to change element on different page

  cookies, filter, html, javascript, local-storage

I have form on the index.html page that I would like to use as a "search" feature. The chosen option from the select box would provide the search parameter for the displayed divs on the second page.

<button class=" col-6 btn btn-main" id="searchButton" type="submit" onclick="findHotel();" style="background-color: #ee580f;" class="form-control">Search</button>

<form id="tourForm" class="main-form tour-form" action="">

So far the onclick() function for the submit button changes the action of the form to the desired url.

I would like to hide all divs on the second page that do not fit into the search criteria. This would be similar to a filter, but the parameters would be chosen from the first page, and applied on the second. The function would hide all div elements and show only the div that matches selected option.

function findHotel() {
    var tourType = document.getElementById("hotelLocation").value;

    switch (tourType) {
        case "Chicago, USA":
            document.getElementById("hotelForm").action = "html/book.html";
            document.getElementsByClassName("hotel-option").style.display = none;
            document.getElementById("chicagoHotel").style.display = block;
            break;

        case "Singapore":
            document.getElementById("hotelForm").action = "html/book.html";
            document.getElementsByClassName("hotel-option").hide;
            document.getElementById("singaporeHotel").
            break;

        default:
            document.getElementById("tourForm").action = "html/book.html";
            break;
    }
}

After trying multiple approaches, it looks like I need to use localstorage or cookies to do this. Any ideas?

Source: Ask Javascript Questions

LEAVE A COMMENT