Question

I have a textbox and whenever the user presses a key it’s checked to see if the user pressed enter. If the enter key is pressed, i want to add all the info in the textbox and transfer the user to a different url.

<script language="javascript" type="text/javascript">
    function checkEnter(e){ //e is event object passed from function invocation
        var characterCode;

        if(e && e.which){ //if which property of event object is supported (NN4)
            e = e;
            characterCode = e.which; //character code is contained in NN4's which property
        }
        else{
            e = event;
            characterCode = e.keyCode; //character code is contained in IE's keyCode property
        }

        if (characterCode == 13) { //if generated character code is equal to ascii 13 (if enter key)
            var searchLink = '/Search/?Keywords=' + document.getElementById('<%= searchBox.ClientID %>').value;

            transferUser(searchLink);         
            return false; 
        }
        else{
            return true; 
        }
    }

    function transferUser(url) {
        window.location.href = url;
        window.location.replace(url);   
    }
    </script>

Search: <input name="ctl00$searchBox" type="text" id="ctl00_searchBox" class="header_line_search_box_textbox" onKeyPress="checkEnter(event);" />

I have tried every possible combination, but nothing happens. The site just refreshes itself.

I also need somehow to convert the text from the user to html safe, must like the HttpUtility.EncodeUrl in aspx.

Answer 1

I’m not sure you need all of this. Normal, built-in behavior for the following HTML markup does exactly as you want without the need for any JavaScript:

<form method="get" action="/Search/">
    <input type="text" name="Keywords">
</form>

However, it is important that your UI have some sort of way to submit the form that doesn’t involve a key stroke. This is for two reasons:

1. As Jorn pointed out, it might not be readily apparent that the key submits the form.
2. Having no submit button may break usability for users who use alternative input devices.

Because of the above reasons, the following is suggested:

<form method="get" action="/Search/">
    <input type="text" name="Keywords">
    <input type="submit" value="Search or 'go' or whatever">
</form>