Question 217281 in Html Question posted in
Some basic documentation can be found here.

Html – how to show search result in another page using javascript

I wanted to show the result of the form into another page. I tried redirecting the result using the window.href.location and localStorage but it’s not redirecting it to another page. I used the click() for the button to see if it will show on the other page but I’m not sure what I’m doing wrong. The search bar is in index.html and after I click the search button, I wanted it show the result in another html file like movies.html

 

 const movieListEl = document.querySelector(".shows");
const moviesForm = document.getElementById("movie__searchbox");

async function main(event) {
    const url = `https://www.omdbapi.com/?apikey=39a36280&s=${encodeURI(event)}`;
    const search = await fetch(`${url}`);
    const data = await search.json();
    movieListEl.innerHTML = data.Search.map((movie) => movieHTML(movie)).join("");
}

// check when the form is submitted
moviesForm.addEventListener("submit", (event) => {
    const searchBarValue = document.getElementById("searchbar").value; // get input's value everytime the form is submitted
    console.log(searchBarValue);
    event.preventDefault(); // prevent refresh
    // localStorage.setItem("key", searchBarValue);
    // const searchKey = localStorage.getItem("key");
    main(searchBarValue);
});

function movieHTML(details) {
    return `<div class="shows__content">
        <figure class="shows__poster">
            <img src="${details.Poster}" alt="" class="poster">
        </figure>
           <div class="poster__description">
            <h4 class="poster__title">${details.Title}</h4>
            <p class="poster__year">${details.Year}</p>
        </div>
    </div>
        `;
}
 

//function click () {
 //    console.log(window.location)
 //    window.location.href = `${window.location.origin}/movies/movies.html`
// }
 
       
        
     
   
  

  <form action="#" id="movie__searchbox" class="nav__search-bar">
    <input type="text" id="searchbar" class="nav__search" placeholder="Search" />
    <button onclick="click()" type="submit">Search</button>
</form>
<div class="shows"></div>
Tags:

2

Answers


  1. 0

    You can achieve what you are doing with window.href.location and localStorage itself.

    I created 2 different files index.html, movies.html

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" id="movie__searchbox" class="nav__search-bar">
        <input type="text" id="searchbar" class="nav__search" placeholder="Search" />
        <button onclick="click()" type="submit">Search</button>
    </form>
    <script>
        
        const moviesForm = document.getElementById("movie__searchbox");

        async function main(event) {
            const url = `https://www.omdbapi.com/?apikey=39a36280&s=${encodeURI(event)}`;
            const search = await fetch(`${url}`);
            const data = await search.json();
            localStorage.setItem("movie_list", JSON.stringify(data.Search));
            window.location.href = `${window.location.origin}/movies.html`
        }

        // check when the form is submitted
        moviesForm.addEventListener("submit", (event) => {
            const searchBarValue = document.getElementById("searchbar").value; // get input's value everytime the form is submitted
            console.log(searchBarValue);
            event.preventDefault(); // prevent refresh
            // localStorage.setItem("key", searchBarValue);
            // const searchKey = localStorage.getItem("key");
            main(searchBarValue);
        });
    </script>
</body>
</html>

    movies.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="shows"></div>
    <script>
        const movie_list = JSON.parse(localStorage.getItem("movie_list"))
        const movieListEl = document.querySelector(".shows");
        movieListEl.innerHTML = movie_list.map((movie) => movieHTML(movie)).join("");

        function movieHTML(details) {
            return `<div class="shows__content">
            <figure class="shows__poster">
            <img src="${details.Poster}" alt="" class="poster">
            </figure>
            <div class="poster__description">
            <h4 class="poster__title">${details.Title}</h4>
            <p class="poster__year">${details.Year}</p>
            </div>
            </div>
            `;
        }
    </script>
</body>
</html>

    Results

    index.html

    movies.html

    Login or Signup to reply.
  2. 0

    On your index page don’t fetch your api just redirect it to that page where you want to show the result of movie list, just pass single parameter that is your search value.

    In your other page where you want to display movie list get the urlParams and then fetch your api and display your movie list as per the given code which I provided below.

    The index page code is:

    <form action="#" id="movie__searchbox" class="nav__search-bar">
<input type="text" id="searchbar" class="nav__search" placeholder="Search" />
<button type="submit">Search</button>

    Script for this:

     <script>
const moviesForm = document.getElementById("movie__searchbox");
// check when the form is submitted
moviesForm.addEventListener("submit", (event) => {
  const searchBarValue = document.getElementById("searchbar").value;
  event.preventDefault();
  window.location.href = `movieList.html?value=${searchBarValue}`;
});

    The Movie List Page:

    <div class="shows"></div>

    And The Script for this page (Api fetch for movie as per urlParams):

    <script>
    // Retrieve the data from the URL parameters or local storage
    const urlParams = new URLSearchParams(window.location.search);
    const value = urlParams.get('value');
    const movieListEl = document.querySelector(".shows");
    async function main(event) {
        const url = `https://www.omdbapi.com/?apikey=39a36280&s=${encodeURI(event)}`;
        const search = await fetch(`${url}`);
        const data = await search.json();
        movieListEl.innerHTML = data.Search.map((movie) => movieHTML(movie)).join("");
    }
    main(value);
    function movieHTML(details) {
        return `<div class="shows__content">
    <figure class="shows__poster">
        <img src="${details.Poster}" alt="" class="poster">
    </figure>
       <div class="poster__description">
        <h4 class="poster__title">${details.Title}</h4>
        <p class="poster__year">${details.Year}</p>
    </div>
</div>`;}
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search