JavaScript form to search engine redirection problem. [Solved]

Question

Ok, so I'm trying to make a form that will take given text and direct you to a chosen search engine with the text as the query. I'm having problems getting the javascript to (re)direct.

What's interesting is that if you make the submit input a button and do onClick="searchForm" and then click on it, it will work. But then you can't type and just press enter to search.. which to me is necessary.

Also, if there is any better but completely different way to do this, I'd love to hear it.

Thanks.

EDIT: Completely changed the code to match what meouw said, which was much more clear than what I originally had, so thanks. I know the HTML was messed up, it was mostly because I was changing everything around to try and get the JavaScript to work. So even now that I cleared everything up, it still has the same problem.

I know there is something I am missing, because if you put an alert('cat'); after changing the url in the JavaScript, you can see that the browser has been redirected to do the search, but once you click OK on the alert, you get taken back. You can even go back in your browser's history to go to your search's page.

EDIT AGAIN: Ok, thanks meouw. Returning false was what I needed all along. Thanks for the help.

FINAL CODE:

<script type="text/javascript">
    function doSearch( f ) {
        var searchTerm = f.searchText.value;

        if( !searchTerm ) {
            //tell user to enter a search string
            // cancel the request by returning false
            return false;
        }

        var sel = f.whichEngine;
        var selectedEngine = sel[sel.selectedIndex].value;
        var engineUrl;

        switch( selectedEngine ) {
        case 'google_web':
            engineUrl = 'http://www.google.com/search?q=';
            break;
        case 'bing_web':
            engineUrl = 'http://www.bing.com/search?q=';
            break;
        case 'yahoo_web':
            engineUrl = 'http://search.yahoo.com/search?p=';
            break;
        case 'google_images':
            engineUrl = 'http://www.images.google.com/images?q=';
            break;
        case 'bing_images':
            engineUrl = 'http://www.bing.com/images/search?q=';
            break;
        case 'yahoo_images':
            engineUrl = 'http://images.search.yahoo.com/search/images?p=';
            break;
        }

        engineUrl += searchTerm;
        window.location.assign(engineUrl);
        return false;
    }

</script>
<form onsubmit="return doSearch(this)">
    <fieldset>
        <legend>Search</legend>
        <ul>
            <li>
                <input type="text" name="searchText" id="searchText" size="41" maxlength="2048" />
            </li>
            <li>
                <select name="whichEngine" id="whichEngine">
                    <optgroup label="Web">
                        <option id="GoogleWeb" value="google_web" checked="checked">Google Web</option>
                        <option id="BingWeb" value="bing_web">Bing Web</option>
                        <option id="YahooWeb" value="yahoo_web">Yahoo! Web</option>
                    </optgroup>
                    <optgroup label="Images">
                        <option id="GoogleImages" value="google_images">Google Images</option>
                        <option id="BingImages" value="bing_images">Bing Images</option>
                        <option id="YahooImages" value="yahoo_images">Yahoo! Images</option>
                    </optgroup>
                </select>
                <input type="submit" value="Search">
            </li>
        </ul>
    </fieldset>
</form>

Answer 1

Your main problem is this

window.location.assign(finalSearchString);

should be

window.location = finalSearchString;

window.location.href = finalSearchString;

Other things:

Your markup is odd
You need to return the output of your function to the onsubmit of the form in case you want to cancel the search.
You don't need the labels and links in the options - instead of having self closing option tags put the text in the option and give the option a value that can be read by your script. This is safer if you come to adding more options later

<form onsubmit="return doSearch(this)">
....
<optgroup label="Google">
    <option value="google_search">Google Web</option>
    <option value="google_images">Google Images</option>
</optgroup>
....
</form>

<script type="text/javascript">

function doSearch( f ) {
    var searchTerm = f.searchText.value;

    if( !searchTerm ) {
        //tell user to enter a search string
        // cancel the request by returning false
        return false;
    }

    var sel = f.whichEngine;
    var selectedEngine = sel[sel.selectedIndex].value;
    var engineUrl;

    switch( selectedEngine ) {
        case 'google_search':
            engineUrl = 'http://www.google.com/search?q=';
            break;
    ....
    }

    engineUrl += searchTerm;
    window.location.href = engineUrl;

}

</script>

Answer 2

You want to submit the form for searching with specified location, right?

Replace this line of your code:

function startSearch(){
  // ...................
  // ...................
  // ...................

  window.location.assign(finalSearchString);
}

With:

function startSearch(){
  // ...................
  // ...................
  // ...................

  if (finalSearchString)
  {
    document.searchForm.action = finalSearchString;
    document.serachForm.submit();
    return true;
  }
  else
  {
    return false;
  }

And finally change your form tag to this:

<form name="searchForm" onSubmit="return startSearch();">