how to do this effect in javascript?

Question

the effect map is http://phplist.xxmn.com/1.jpg

There are two searches engines. one is the site's default search. another is the google custom search. When the vistor choses the site's default search, it should use the site's default search. When they chose the google custom search option, it should use 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"  /> 

This is the site's default search. I have added a select dropdown option to it. But I don't know how to use both. When i chose the google search, it should use google search and when I choose the default search it should use the default search.

Answer 1

I think you need to have the select inside the form first. Then, depending on the value of search_1 , you could redirect to http://www.google.com/?q=[the value of search_theme_form] .

edit: if you are using jQuery, you could do something like this:

jQuery ("#search-theme-form").submit (function () {
  if (jQuery (".search_1").val () == 1) {
    window.location.href = 'http://www.google.com/?q=' + 
      encodeURIComponent (jQuery ("#edit-search-theme-form-1").val ());
  }
  else {
    jQuery ("this").submit();
  }
});

note: I haven't tested the above code. Also, I would add / change your form element id attributes to something more meaningful, or at least put an id on the select.

Of course, you could also implement this behaviour in your form handler code, which would probably be more sensible. If you're using PHP, something like this would work (assuming you haven't already sent page information):

//add 'name="search_target"' to your select element
if ($REQUEST['search_target'] == 1) { 
  header ("Location: http://www.google.com/?q=" . 
    urlencode ($REQUEST['search_theme_form']));
}
else {
  //process local search
}

Answer 2

after class="search_l" in the select tag, add id="engine_dd"

then in the form tag after id="search-theme-form" , add onsubmit="function(){if(document.getElementById('engine_dd').selectedIndex == 1) window.location = document.getElementById('edit-search-theme-form-1').value;}"

I think that's what you're asking for! good luck :)

Answer 3

You can add an onchange event to the select tag, that changes the action attribute of the form depending on which option the user chooses. To make it simpler, get the value of the select tag on the server side and redirect to the proper search destination