Redirecting JavaScript form to search engine

Question

Redirecting JavaScript form to search engine

I am struggling with creating a form that enables a user to input text and then directs them to a specified search engine with the input as the query. I am encountering difficulties in getting the JavaScript to properly redirect.

An interesting observation is that if you change the submit input to a button, add onClick="searchForm", and manually click on it, the functionality works. However, this method eliminates the ability to simply type and press enter for searching, which I believe is essential.

If there are alternative methods of achieving this functionality, I would greatly appreciate any suggestions.

Thank you.

EDIT: I have completely revised the code based on meouw's suggestion, as it was much clearer than my initial approach. The HTML structure was jumbled up due to multiple modifications aimed at resolving the JavaScript issue. Even after organizing everything, the problem persists.

I am aware that something crucial is missing because inserting an alert('cat'); after changing the URL in the JavaScript reveals that the browser does indeed redirect for the search. However, upon clicking OK on the alert, the redirection is reversed. It is even possible to navigate back through the browser history to return to the search page.

EDIT AGAIN: Thank you, meouw. Adding 'return false' was the solution I had been overlooking. Your assistance is valued.

FINAL CODE:

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

        if( !searchTerm ) {
            //prompt 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>

javascript forms search

Answer 1

Answer №1

The primary issue lies here

window.location.assign(finalSearchString);

should be

~~window.location = finalSearchString;~~

window.location.href = finalSearchString;

Additional tips:

Your HTML structure is unconventional
Ensure you return the result of your function to the onsubmit event of the form if you wish to prevent the search from proceeding.
Avoid including labels and links in options - instead of using self-closing option tags, place the text within the option tag and assign a value that can be interpreted by your script. This approach is more secure when adding more options later on.

<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 ) {
        //prompt user to input a search string
        // end 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

The primary issue lies here

window.location.assign(finalSearchString);

should be

~~window.location = finalSearchString;~~

window.location.href = finalSearchString;

Additional tips:

Your HTML structure is unconventional
Ensure you return the result of your function to the onsubmit event of the form if you wish to prevent the search from proceeding.
Avoid including labels and links in options - instead of using self-closing option tags, place the text within the option tag and assign a value that can be interpreted by your script. This approach is more secure when adding more options later on.

<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 ) {
        //prompt user to input a search string
        // end 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 3

Answer №2

Do you need to submit the search form with a specific location?

Make this adjustment in your code:

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

  window.location.assign(finalSearchString);
}

Modify it to this:

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

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

Lastly, update your form tag like so:

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

Answer 4

Do you need to submit the search form with a specific location?

Make this adjustment in your code:

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

  window.location.assign(finalSearchString);
}

Modify it to this:

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

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

Lastly, update your form tag like so:

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

Redirecting JavaScript form to search engine

Answer №1

Answer №2

Similar questions

Issues with Autofocus while Searching and Selecting from Dropdown menu

Employing an item as a function

How can I incorporate a CDN link into the newly updated Next.js App Router?

Is it possible to set a value for a jQuery function after the function has

What is the best way to incorporate a search feature within Bootstrap cards?

In order to ensure accuracy, the 'to' date must always be after the '

Finding the maximum value among multiple variables in AngularJS

Encountering issues with resolving dependency tree post updating node, specifically with node-sass dependency causing failure

Unexpectedly, the child component within the modal in React Native has been resetting to its default state

What could be causing the malfunction of the v-bind attribute?

The Alchemy feature on hover is not functioning

Conceal button divider on pager in Jqgrid

Ensuring a consistently positioned footer at the bottom

Continue looping in Javascript until an empty array is identified

Adding Node.js Express responses to a running list

Stop an item from being included based on a boolean value

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Inexplicably, HighCharts flips its axis when exporting data

Adjustable Bootstrap Progress Bar - Modify element width on the fly

Utilizing Regular Expressions in Sails.js Routing