Question

Here is my code i am using for custom search,

<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com.pk/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
$('input[@name=sr]').change(function() {
 if ($("input[@name=sr]:checked").val() == 'kw')              
    var qval = "kw"

 else 
    var qval = "gw"

});
google.setOnLoadCallback(function() {
var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
  '009317721292264254327:ce_olwjr2z4', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);  
var qval = $("input[@name=sr]:checked").val();
var options = new google.search.DrawOptions();
options.setAutoComplete(true);  
options.enableSearchboxOnly("http://www.alhudapk.com/audios/search.html", qval);
customSearchControl.draw('cse-search-form', options);
}, true); 
</script>
<div style="margin-top: 10px;">
<input type="radio" name="sr" id="kw" value="kw" checked="checked"  />Audio
<input type="radio" name="sr" id="gw" value="gw" / >Web
</div>
<style type="text/css">
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-color: #D9D9D9;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #2F5BB7;
background-color: #357AE8;
background-image: none;
filter: none;
}
.gsc-search-box {
margin-top: -5px !important; 
margin-bottom: -5px !important;
}

</style>

I just need result a simple result i.e

if radio1 is checked

search.html?kw=mysearchkeyword

if radio2 is checked?gw=mysearchkeyword

Reason is that for “kw” i am using my own personal search
and for google web search i need “gw” parameter to pass through url please help

My code does not work after page is load, it only works once but does not change any value after page is load

Answer 1

Some issues:

1) Syntax error: input[@name=sr] must be input[name$=sr]:

2) Local variable qvar has no sense

3) options.enableSearchboxOnly must be called on each radio button change:

Try this instead:

        <script type="text/javascript">
            google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
            google.setOnLoadCallback(function() {
               var customSearchOptions = {};

               var customSearchControl = new google.search.CustomSearchControl(
                   '009317721292264254327:ce_olwjr2z4', customSearchOptions);
               customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);  

               var options = new google.search.DrawOptions();
               options.enableSearchboxOnly("http://www.alhudapk.com/audios/search.html",
                                          $("input[name$=sr]:checked").val() );
               options.setAutoComplete(true);  
               customSearchControl.draw('cse-search-form', options);

               $('input[name$=sr]').change(function() {
                   options.enableSearchboxOnly("http://www.alhudapk.com/audios/search.html",
                     $("input[name$=sr]:checked").val() );
                   customSearchControl.draw('cse-search-form', options);
              });

            }, true); 
       </script>