CODEWITHSUNDEEP
javascripthtmlinternet-explorersearch
William Oliveira
William Oliveira

Reputation: 53

HTML - search does not work

Can anyone help?

I created this search bar that works in google chrome , but not in Internet Explorer .

If I press "Enter " or click on the search button nothing happens in Internet Explorer.

I should be redirected to a page , as what happens in chrome.

Any suggestion? Thank You!

 <html>
      <body>

     <datalist id="colors">
        <option value="Red">
        <option value="Blue ">
        <option value="Green">
        <option value="Black">
      </datalist>


    <input type="hidden" id="color"  name="color" value="RED" required>
    <input type="hidden" id="color2"  name="color2" value="BLUE" required>
    <input type="hidden" id="color3"  name="color3" value="GREEN" required>
    <input type="hidden" id="color4"  name="color4" value="BLACK" required>

    <form>
      <input type="search" list="colors" class="searchbox" id="searchbox" placeholder="What Color?" name="color_repeat" required autocomplete="off"
       onsearch="check(this)">
      <input type="button" class="button" id="button" value="Search" onclick="check(document.getElementById('searchbox'))">  
    </form>

    <script>
    function check(input) 

    {
    if (input.value.toUpperCase() != document.getElementById('color').value)
    {
    if (input.value.toUpperCase() != document.getElementById('color2').value)  
    {
    if (input.value.toUpperCase() != document.getElementById('color3').value) 
    { 
    if (input.value.toUpperCase() != document.getElementById('color4').value) 
    {       

    } 
    else 
    { 
    window.top.location.href = 'http://www.color.com.br/BLACK’
    }
    } 
    else 
    { 
    window.top.location.href = 'http://www.color.com.br/GREEN’
    }
    } 
    else 
    { 
    window.top.location.href = 'http://www.color.com.br/BLUE’
    }
    } 
    else 
    { 
    window.top.location.href = 'http://www.color.com.br/BLUE’
    }

    }
    </script>


</body>
</html>

Upvotes: 2

Views: 108

Answers (1)

morha13
morha13

Reputation: 1937

Maybe adding an action to the form will help.

<form action="javascript:check(document.getElementById('searchbox'))">
  <input type="search" list="colors" class="searchbox" id="searchbox" placeholder="What Color?" name="color_repeat" required autocomplete="off"
   onsearch="check(this)">
  <input type="submit" class="button" id="button" value="Search">  
</form>

I would suggest editing the function by moving the getElementById into the function:

<form action="javascript:check()">
    <input type="search" list="colors" class="searchbox" id="searchbox" placeholder="What Color?" name="color_repeat" required autocomplete="off" onsearch="check(this)">
    <input type="submit" class="button" id="button" value="Search">
</form>
<script>
    function check() {
        var input = document.getElementById('searchbox');
        if (input.value.toUpperCase() != document.getElementById('color').value) {
            if (input.value.toUpperCase() != document.getElementById('color2').value) {
                if (input.value.toUpperCase() != document.getElementById('color3').value) {
                    if (input.value.toUpperCase() != document.getElementById('color4').value) {
                    } else {
                        window.top.location.href = 'http://www.color.com.br/BLACK’
                    }
                } else {
                    window.top.location.href = 'http://www.color.com.br/GREEN’
                }
            } else {
                window.top.location.href = 'http://www.color.com.br/BLUE’
            }
        } else {
            window.top.location.href = 'http://www.color.com.br/BLUE’
        }

    }
</script>

Upvotes: 1

Related Questions