Hugh Chalmers Hugh Chalmers - 1 month ago 9
HTML Question

Javascript searching error?

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


This code is meant to take input from a user via a search box, and redirect them to a web page which has their input at the end. www.zentriamc.com/teachers/[input]. Why does this not work?

Answer

I saw you are using 2 forms one for input and the other for submit. but you don't need to use any forms.

See this should work see 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>

Comments