SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    how to exchange the select options?


    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 :

    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.
    Attached Images Attached Images
    • File Type: jpg 1.jpg (4.7 KB, 14 views)

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    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?
    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.

    Quote Originally Posted by runeveryday View Post
    how to update the action attribute ?
    If you have a refernce to the form in a variable called form, you can update the action attribute with:

    form.action = 'search.php';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <select class="search"  onchange="selectSearch(this.value)" >
            <option value="0">the default search</option>
             <option value="1">google search</option>
          </select>
    the function

    Code:
    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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)"

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •