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