2016-10-25 6 views
0
<!DOCTYPE html> 
<html> 
<head> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    <title>Search Teachers</title> 
</head> 
<body> 
    <form id="search" name="search"> 
     <p class="search-text">Search Teacher's Surname:</p><input class= 
     "search-box" id="client_search" type="text"> 
    </form> 
    <form> 
     <input class="search-button" id="search-button" onclick="search();" 
     type="submit"> 
    </form> 
    <div class="message"> 
     <p><span class="red">Can't find a teacher?</span> Try checking that you 
     spelled their surname correctly.<br> 
     I should have a list of all surnames &amp; proper spellings up pretty 
     soon.</p> 
     <p><span class="red">Still can't find a teacher?</span> The website is 
     not finished yet, and only a few teachers have been added.<br> 
     Pretty soon, I should have all teachers added. If you really want a 
     teacher added quickly, DM me.</p> 
    </div> 
    <div class="zentrian"> 
     <img class="logo" src="http://www.zentriamc.com/logo.png" style= 
     "left:20%;position:absolute;" width="10%;"> 
     <p style="text-align:center;">This website code was written by Hugh 
     24/10/16. Last edited 24/10/16</p> 
    </div> 
    <script> 
    if (
     /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i 
     .test(navigator.userAgent)) { 
     window.location = "http://www.zentriamc.com/teachers/error.html" 
    } 

    function search() { 
     var search_item = document.getElementById("client_search").value; 
     var search_item = search_item.toLowerCase(); 
     window.open("http://www.zentriamc.com/teachers/" + search_item, 
      '_blank'); 
    } 
    </script> 
</body> 
</html> 

このコードは、ユーザーからの入力を検索ボックスで取得し、最後に入力があるWebページにリダイレクトするためのコードです。 www.zentriamc.com/teachers/ [入力]。なぜこれは機能しませんか?JavaScriptの検索エラー?

+0

を参照して動作するはずですか? –

答えて

0

入力用に2つのフォームと送信用に2つのフォームを使用していることがわかりました。どんなフォームを使う必要はありません。

が、これはあなたが2つの形態を持っているのはなぜhttps://jsfiddle.net/vncxfx0s/21/

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="style.css" rel="stylesheet" type="text/css"> 
 
    <title>Search Teachers</title> 
 
</head> 
 

 
<body> 
 

 
    <p class="search-text">Search Teacher's Surname:</p> 
 
    <input class="search-box" id="client_search" type="text"> 
 

 
    <input class="search-button" id="search-button" onclick="search();" type="submit"> 
 

 
    <div class="message"> 
 
    <p><span class="red">Can't find a teacher?</span> Try checking that you spelled their surname correctly. 
 
     <br>I should have a list of all surnames &amp; proper spellings up pretty soon. 
 
    </p> 
 
    <p><span class="red">Still can't find a teacher?</span> The website is not finished yet, and only a few teachers have been added. 
 
     <br>Pretty soon, I should have all teachers added. If you really want a teacher added quickly, DM me.</p> 
 
    </div> 
 
    <div class="zentrian"> 
 
    <img class="logo" src="http://www.zentriamc.com/logo.png" style="left:20%;position:absolute;" width="10%;"> 
 
    <p style="text-align:center;">This website code was written by Hugh 24/10/16. Last edited 24/10/16</p> 
 
    </div> 
 
    <script> 
 
    if (
 
     /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i 
 
     .test(navigator.userAgent)) { 
 
     window.location = "http://www.zentriamc.com/teachers/error.html" 
 
    } 
 

 
    function search() { 
 
     var search_item = document.getElementById("client_search").value; 
 
     var search_item = search_item.toLowerCase(); 
 
     window.open("http://www.zentriamc.com/teachers/" + encodeURIComponent(search_item), 
 
     '_blank'); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>