target input value in the form to store in the localStorage after submitting the form and use the value for omdbapi

Question

I wanted to get the value in the input field after clicking the search button and set it in the localStorage then store it in the the searchKey variable and pass it in the main() to search the movies in omdbapi.

I tried using the onsubmit in the form and passed in the browse(event) to see if I can get the value in the input field. However, when I console.log(event.target.value) the input value is not showing up after clicking the search button.

    const movieListEl = document.querySelector('.shows');
    const searchKey = localStorage.getItem("key");
    
    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();
        // console.log(data.Search)
        movieListEl.innerHTML = data.Search.map((movie) => movieHTML(movie)).join("");
    
    }

    main(searchKey);

   function browse(event){
        event.preventDefault();
        console.log(event.target.value);
        localStorage.setItem("key", event.target.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>
        `
    }
    
    
   
        
     

   

         <form action="" id="movie__searchbox" class="nav__search-bar" 
         onsubmit="browse(event)">
        <input type="text" id="searchbar" class="nav__search" placeholder="Search" />
        <button type="submit"  > 
      Search</button>
        </form>
     <div class="shows"></div>

Answer 1

Why do you get the value of the search button through event.target? The event object corresponds to the form submission as far as I remember so it's better to get it directly.

Also, inline attributes like onsubmit() are a bad practice, use the addEventListener() method instead.

And, call the main() function, update local storage, and get <input>'s value when the form is submitted.

And, here's your final code.

I commented everything related to local storage because it doesn't work in Stack Snippets.

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>
        `;
}

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

See this JSFiddle for a working version using local storage.

Answer 2

Issue

By accessing event.target.value in the browse function, you're getting the value of the form instead of the value of the input.

Potential Solution

I edited your snipped and gave the input a name of searchbarinput so that the browse function could reference it by name.

Note: I only commented out the localStorage.setItem so that the example would run on Stack Overflow

Alternative:

You could also pass the form (event.target) to the FormData constructor.

    const movieListEl = document.querySelector('.shows');
    const searchKey = localStorage.getItem("key");
    
    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();
        // console.log(data.Search)
        movieListEl.innerHTML = data.Search.map((movie) => movieHTML(movie)).join("");
    
    }

    main(searchKey);

   function browse(event){
        event.preventDefault();
        console.log(event.target.elements.searchbarinput.value);
        //localStorage.setItem("key", event.target.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>
        `
    }
    
    
   
        
     

   

         <form action="" id="movie__searchbox" class="nav__search-bar" 
         onsubmit="browse(event)">
        <input type="text" name="searchbarinput" id="searchbar" class="nav__search" placeholder="Search" />
        <button type="submit"  > 
      Search</button>
        </form>
     <div class="shows"></div>