Hello Everyone,

I have chosen to use Google Custom Search with my website and was given the following code, my question is, how can i pass a search query from my homepage which has a standard form on there to the search page which holds this code?

I am given a search box within this code but would prefer to use my own on the homepage...

Thanks

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('001427157132748787903:rmvstkwg_s4');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" /> <style type="text/css">
  .gsc-control-cse {
    font-family: Verdana, sans-serif;
    border-color: #070707;
    background-color: #070707;
  }
  input.gsc-input {
    border-color: #2A2A2A;
  }
  input.gsc-search-button {
    border-color: #63D03B;
    background-color: #37831C;
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #E9E9E9;
    background-color: #E9E9E9;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-top-color: #FF9900;
    border-left-color: #E9E9E9;
    border-right-color: #E9E9E9;
    background-color: #37831C;
  }
  .gsc-tabsArea {
    border-color: #E9E9E9;
  }
  .gsc-webResult.gsc-result {
    border-color: #070707;
    background-color: #070707;
  }
  .gsc-webResult.gsc-result:hover {
    border-color: #070707;
    background-color: #070707;
  }
  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b {
    color: #237F03;
  }
  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b {
    color: #237F03;
  }
  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b {
    color: #FFFFFF;
  }
  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b {
    color: #237F03;
  }
  .gsc-cursor-page {
    color: #237F03;
  }
  a.gsc-trailing-more-results:link {
    color: #237F03;
  }
  .gs-webResult .gs-snippet {
    color: #FFFFFF;
  }
  .gs-webResult div.gs-visibleUrl {
    color: #237F03;
  }
  .gs-webResult div.gs-visibleUrl-short {
    color: #237F03;
  }
  .gs-webResult div.gs-visibleUrl-short {
    display: none;
  }
  .gs-webResult div.gs-visibleUrl-long {
    display: block;
  }
  .gsc-cursor-box {
    border-color: #070707;
  }
  .gsc-results .gsc-cursor-page {
    border-color: #E9E9E9;
    background-color: #070707;
  }
  .gsc-results .gsc-cursor-page.gsc-cursor-current-page {
    border-color: #FF9900;
    background-color: #37831C;
  }
  .gs-promotion {
    border-color: #336699;
    background-color: #FFFFFF;
  }
  .gs-promotion a.gs-title:link,
  .gs-promotion a.gs-title:link *,
  .gs-promotion .gs-snippet a:link {
    color: #237F03;
  }
  .gs-promotion a.gs-title:visited,
  .gs-promotion a.gs-title:visited *,
  .gs-promotion .gs-snippet a:visited {
    color: #237F03;
  }
  .gs-promotion a.gs-title:hover,
  .gs-promotion a.gs-title:hover *,
  .gs-promotion .gs-snippet a:hover {
    color: #FFFFFF;
  }
  .gs-promotion a.gs-title:active,
  .gs-promotion a.gs-title:active *,
  .gs-promotion .gs-snippet a:active {
    color: #237F03;
  }
  .gs-promotion .gs-snippet,
  .gs-promotion .gs-title .gs-promotion-title-right,
  .gs-promotion .gs-title .gs-promotion-title-right *  {
    color: #FFFFFF;
  }
  .gs-promotion .gs-visibleUrl,
  .gs-promotion .gs-visibleUrl-short {
    color: #237F03;
  }
</style>

the google search is "google search api"

I can't see that you would want the Google control to be part of your own form, which will submit to a different (non-Google) server.

In fact, as far as I can tell, you positively shouldn't try to merge the two.

However, you can adapt the code you were given to incorporate it into your layout:

  1. Change <div id="cse" ...>Loading</div> to an HTML element of your choice eg. table cell <td id="cse">Loading</td> or paragraph <p id="cse">Loading</p> . It may also work with an inline span <span id="cse">Loading</span> . Make sure there is only ever one element with id="cse" .
  2. Adapt the CSS to give the control the appearance you desire.

But always with the Google control outside your own form.

Airshow

I can't see that you would want the Google control to be part of your own form, which will submit to a different (non-Google) server.

In fact, as far as I can tell, you positively shouldn't try to merge the two.

However, you can adapt the code you were given to incorporate it into your layout:

  1. Change <div id="cse" ...>Loading</div> to an HTML element of your choice eg. table cell <td id="cse">Loading</td> or paragraph <p id="cse">Loading</p> . It may also work with an inline span <span id="cse">Loading</span> . Make sure there is only ever one element with id="cse" .
  2. Adapt the CSS to give the control the appearance you desire.

But always with the Google control outside your own form.

Airshow

Thank you all for your replies but I dont think you get what i mean. I have one search form on my homepage which fits with my site template. I want what ever is types into here passed to the search.php page by maybe using the GET method and then for the google search code (Posted above) to search for what ever is in the GET method however, if there is not anything in the GET method then it will just display the seach box on the search page which it does already.

Thank you,

Also sorry if my English is not great.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.