Search code examples
javascripthtmlenteronkeypress

Keypress for Firefox


I have an input type text that acts as a search box along with a search button. When someone hits the enter key on the search box it works in all browsers except for FF. Anyone know a way around to modify my code? Thanks in advance!

HTML

<input type="text" name="search-bar" id="search-bar" class="search-box" onkeypress="return submitEnter();" placeholder=" Start typing to search"/>

<button onclick="redirect();" class="search-button" id="lang-search">Search</button>

<dl id="sample" class="dropdown">
            <dt><a href="#"><img src="images/menu-icon.png" alt=""></a></dt>
            <dd>
                <ul>
                    <li>
                        <input type="radio" name="selection" value="music" id="music-button"><img id="music-listener" class="dropdown-select" src="images/music-icon.png" alt="music">
                    </li>

                    <li>
                        <input type="radio" name="selection" value="books" id="books-button"><img id="books-listener" class="dropdown-select" src="images/books-icon.png" alt="books">
                    </li>

                    <li>
                        <input type="radio" name="selection" value="games" id="games-button"><img id="games-listener" class="dropdown-select" src="images/games-icon.png" alt="games">
                    </li>

                    <li>
                        <input type="radio" name="selection" value="movies" id="movies-button"><img id="movies-listener" class="dropdown-select" src="images/movies-icon.png" alt="movie">
                    </li>                       
                </ul>
            </dd>
        </dl>           

        <div class="clear-float"></div>

        <input type="radio" name="selection" value="music" id="music-radio" class="radio-button"><span class="radio-text" id="lang-music">Music</span>

        <input type="radio" name="selection" value="books" id="books-radio" class="radio-button"><span class="radio-text" id="lang-books">Books</span>

        <input type="radio" name="selection" value="games" id="games-radio" class="radio-button" ><span class="radio-text" id="lang-games">Games</span> 

        <input type="radio" name="selection" value="movies" id="movies-radio" class="radio-button" ><span class="radio-text" id="lang-movies">Movies</span> 

Javascript

 function redirect() {

            var url = "mylink.com";
            var buttonValue;            

            if (document.getElementById('music-button').checked) {
              buttonValue = document.getElementById('music-button').value;
            }

            else if(document.getElementById('books-button').checked) {
              buttonValue = document.getElementById('books-button').value;
            }

            else if (document.getElementById('games-button').checked) {
              buttonValue = document.getElementById('games-button').value;
            }   

            else if (document.getElementById('movies-button').checked) {
              buttonValue = document.getElementById('movies-button').value;
            }   

            else if (document.getElementById('music-radio').checked) {
              buttonValue = document.getElementById('music-radio').value;
            }

            else if(document.getElementById('books-radio').checked) {
              buttonValue = document.getElementById('books-radio').value;
            }

            else if (document.getElementById('games-radio').checked) {
              buttonValue = document.getElementById('games-radio').value;
            }   

            else if (document.getElementById('movies-radio').checked) {
              buttonValue = document.getElementById('movies-radio').value;
            }   

            url = url+"&q="+document.getElementById("search-bar").value+"&m="+buttonValue;
            location.href=url;          
        }           

        $("#music-listener").click(function() {
            $("#music-button").attr('checked','checked');
        });

        $("#books-listener").click(function() {
            $("#books-button").attr('checked','checked');
        });

        $("#games-listener").click(function() {
            $("#games-button").attr('checked','checked');
        }); 

        $("#movies-listener").click(function() {
            $("#movies-button").attr('checked','checked');
        }); 

        function submitEnter() {
            var keycode;
            if (window.event) keycode = window.event.keyCode;
            else if (e) keycode = e.which;
            else return true;

            if (keycode == 13)
               {
              redirect();   
              return false;
               }
            else
               return true;            
        }   

Solution

  • Pass the event object to the submitEnter() function.

    HTML:

    <input type="text" name="search-bar" id="search-bar" class="search-box" onkeypress="return submitEnter(event);" placeholder=" Start typing to search"/>
    

    JS:

    function submitEnter(event) {
            var keycode = event.keyCode ? event.keyCode : event.which;
    
            if (keycode == 13)
               {
              redirect();   
              return false;
               }
            else
               return true;            
        }