How to exchange the select options?

JavaScript
1


now, i want to do an effect the same as the above image.there are two searches. one is the site’s default search. another is the google custom search. when the vistor chose the site’s default search, it using the site’s default search.when chose the google custom search. it using the google custom search.

the html code :


<select class="search_l" >
        <option value="0">the default search</option>
         <option value="1">google search</option>
      </select>

 <form action="/"  accept-charset="UTF-8" method="post" id="search-theme-form"> 
 <div><div id="search" class="container-inline"> 
 <div class="form-item" id="edit-search-theme-form-1-wrapper"> 
 <input type="text" maxlength="128" name="search_theme_form" id="edit-search-theme-form-1" size="15" value="" title="put the search keyword in" class="form-text" /> 
</div> 
<input type="image" name="submit" id="edit-submit"  class="form-submit"    src="images/search_btn_top.gif" /> 
<input type="hidden" name="form_build_id" id="form-2" value="form-f02"  /> 
<input type="hidden" name="form_token" id="edit-search-theme-form-form-token" value="c5a"  /> 
 <input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form"  />

the form in the code is site’s default search. i add the select part to it. but don’t know how to exchange it. when i chose the google search. it using the google search. when chose the default search. it using the site’s default search.thank you.

2

If both your own search and the google search are able to use the same posted data, then you can just update the action attribute of the form whenever the search choice is changed.

If however a different form submission would be required for your site search, as compared with the google search, you will need to have two search forms on the page. One that is shown, one that is hidden. When the search choice is changed you would hide the forms and show only the one that was selected.

A third option, which is guaranteed to work when no scripting is available, is to submit the selected search choice along with the search query to your own server-side script, which uses the selected search type to determine where to redirect the page to.

3

thanks for your answer. i am a newbie of javascript. if i want to use the first ways to get the effect. how should i do? how to update the action attribute ?

4

You assign an onchange event to the select, where the assigned function checks to see if the selected option is not the google one.
If it’s not the google one, the function sets the form action to your own search page.
If it is, the function sets the form action to be the google one.

If you have a refernce to the form in a variable called form, you can update the action attribute with:

form.action = ‘search.php’;

5 

<select class="search"  onchange="selectSearch(this.value)" >
        <option value="0">the default search</option>
         <option value="1">google search</option>
      </select>

the function


function selectSearch(searchType){
     if(searchType==0){

    form.action = 'search.php';  
        
     }else{
    form.action=
'http://www.google.com/?q=' 
      encodeURIComponent (("#edit-search-theme-form-1").val ());
         
     }

am i right? i don’t know how to write it.

6

You’re using a variable called form, but the function has no idea what it is supposed to be.

If you just pass the select element to the function, it can then work with the select value and other parts of the form at the same time.

That way you can use select.form to reference the form itself.

onchange=“selectSearch(this)”


function selectSearch(select) {
    var form = select.form;
    var selectedIndex = select.selectedIndex;
    var searchTerm = document.getElementById('edit-search-theme-form-1').value;

    form.action = 'search.php';
    if (selectedIndex === 1) {
        form.action = 'http://www.google.com/?q=' + encodeURIComponent (searchTerm);
    }
}

Something like that should be closer to a workable solution.