Using Javascript in HTML returning false even if the condition is true

Question

I'm using Javascript in HTML to return a popup error if the input in the searchbar is not 'Dog'. However, it still shows the popup error when the input is 'Dog'.

 <div class="search" >

    <input type="text" name="s" 
      <a href="/redirect.php">
    <button id="find" type="submit" 
    onclick="javascript: if(document.getElementById('find').value!='Dog') 
    {
        alert('This animal does not exist in the system, try another one...');
        return false;
    }">&nbsp;</button>
  </div>

The code is supposed to go to redirect.php if the input in the searchbar is 'dog'. Where am I going wrong with the code?

Answer 1

try this

<div class="search" >
    <input type="text" id="find" name="s" />
    <a href="/redirect.php">
    <button  type="submit" 
    onclick="javascript: if(document.getElementById('find').value!='Dog') {
        alert('This animal does not exist in the system, try another one...');
        return false;
    }">&nbsp;</button>
</div>

Update:

The reason why it wasn't working before was because the button element had the find id instead of the text field.