LaVOZs

The World’s Largest Online Community for Developers

'; javascript - Use input value passed in from previous page to filter through a list on page load - LavOzs.Com

Ok, this might be quite hard for me to explain, but I will give it a go. I have two HTML pages: form.html & display.html. The form page has an input which obtains a value and then puts it into local storage once the form is submitted. After the form submission, the user will be taken to the display page, which will then retrieve the input value from the previous page from local storage and then displays the value inside the input field on the display page. The display page will later act as a job page which will display a list of jobs which is filterable by the value inside the input field on the same page. I can get the filter function to work by using onkeyup on the input field, but I what I can't make work is the filter function with the input value from the previous page by using something like onload. The reason why I am using two pages is that I will later use this code on a website which will have a search box on the landing page, and then will be directed to the Jobs page with filtered results. I am sorry if this was really hard to understand, I will post the code below so you might better understand.

Many thanks to anyone who takes time out of their day to help me with this problem, it is much appreciated.

form.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function passValues() {
            var firstName = document.getElementById("txt").value;
            localStorage.setItem("textValue", firstName);
            return false;
        }
    </script>
</head>

<body>
    <form action="display.html">
        <input type="text" id="txt" />
        <input type="submit" value="Click" onclick="passValues();" />
    </form>
</body>

</html>

display.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>Tokyo Expat Job Search</h1>
    <input onload="filter()" onkeyup="filter()" id="result" type="text">

    <ul id="Menu">
        <li><a href="#">English Techer</a></li>
        <li><a href="#">Waiter/Waitress</a></li>
        <li><a href="#">Developer</a></li>
        <li><a href="#">Banker</a></li>
        <li><a href="#">Designer</a></li>
        <li><a href="#">Logistics</a></li>
    </ul>

    <script>
        function filter() {

            var filterValue, input, ul, li, a, i;
            input = document.getElementById("result");
            filterValue = input.value.toUpperCase();
            ul = document.getElementById("Menu");
            li = ul.getElementsByTagName("li");

            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("a")[0];
                if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
                    li[i].style.display = "";

                } else {
                    li[i].style.display = "none";
                }
            }
        }


        document.getElementById("result").value = localStorage.getItem("textValue");
    </script>
</body>

</html>

Try to add the listener to window.onload? The input does not have such an event.

window.addEventListener('load', filter, false)
Related
How to focus on a form input text field on page load using jQuery?
Make search input to filter through list Jquery
IE loses automatic UTF-8 encoding in iframe form target
Filter through list in Javascript
remove None value from a list without removing the 0 value
loading previous input values with local storage
Cannot display HTML string
Value from input to Angular scope (filter)
Js On load Page Change Input Min Value
How to pass a variable into a input value on page load?