admin管理员组

文章数量:1430937

I'm trying to get a search box that when it takes an input it sends the user to a specific page. But for some reason that, I cannot figure out, it doesn't do anything when an input is given. My code is the following:

<!DOCTYPE html>
<html>
    <head>
        <title>TEST</title>
        <script type="text/javascript">
            var input = document.getElementById("search");

            function sendToPage(){
                if (input.value == "happy"){
                    location.href="suggestion_happy.html";
                }
                else if (input.value == "sad"){
                    location.href="suggestion_sad.html";
                }
                else {
                    alert('Invalid Input.');
                }
                    }
        </script>
    </head>
    <body>
        <div>
            <form onsubmit="sendToPage()">
                <input type="text" method="put" id="search" placeholder="Search" value="">
            </form>
        </div>
    </body>
</html>

Please help I'm still kind of new to javascript :)

I'm trying to get a search box that when it takes an input it sends the user to a specific page. But for some reason that, I cannot figure out, it doesn't do anything when an input is given. My code is the following:

<!DOCTYPE html>
<html>
    <head>
        <title>TEST</title>
        <script type="text/javascript">
            var input = document.getElementById("search");

            function sendToPage(){
                if (input.value == "happy"){
                    location.href="suggestion_happy.html";
                }
                else if (input.value == "sad"){
                    location.href="suggestion_sad.html";
                }
                else {
                    alert('Invalid Input.');
                }
                    }
        </script>
    </head>
    <body>
        <div>
            <form onsubmit="sendToPage()">
                <input type="text" method="put" id="search" placeholder="Search" value="">
            </form>
        </div>
    </body>
</html>

Please help I'm still kind of new to javascript :)

  • javascript
  • html
  • forms
Share Improve this question asked Oct 25, 2015 at 11:52 Angus DobsonAngus Dobson 411 silver badge10 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 2

you don't need to create a form to do this

check out this code

<!DOCTYPE html>
<html>
    <head>
        <title>TEST</title>
        <script type="text/javascript">


            function sendToPage(){
                var input = document.getElementById("search").value;
                 //alert(input);
                if (input == "happy"){
                    location.href = "suggestion_happy.html";
                    return false;
                }
                else if (input == "sad"){
                    location.href = "suggestion_sad.html";
                    return false;
                }
                else {
                    alert('Invalid Input.');
                }
                    }
        </script>
    </head>
    <body>
        <div>
                <input type="text" method="put" id="search" placeholder="Search" value="">
                <input type='submit' onclick="sendToPage();" />
        </div>
    </body>
</html>

  <script type="text/javascript">


            function sendToPage(){
                var input = document.getElementById("search").value;
                 //alert(input);
                if (input == "happy"){
                    //location.href="suggestion_happy.html";                    
                    location.replace("suggestion_happy.html");
                    return false;
                }
                else if (input == "sad"){
                    location.replace("suggestion_sad.html");
                    return false;
                }
                else {
                    alert('Invalid Input.');
                }
                    }
        </script>

        <div>
            <form action="" onsubmit="return sendToPage()" method="post">
                <input type="text" id="search" placeholder="Search" value="">
            </form>
        </div>

I have edited my asnwer plz try this

there are two problems here:

  1. submitting a form will always refresh the page. So onsubmit is killing your app
  2. by putting the js in the <head> your document.getElementById call fails because that element doesn't exist yet. Javascript belongs at the end of the page, just before the closing </body> tag

本文标签： javascriptHow to get search bar to take input and go to pageStack Overflow

版权声明：本文标题：javascript - How to get search bar to take input and go to page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745568464a2663902.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。