How can I get the query from the address bar in the Google Custom Search

I have a search bar within my header and a seperate search page,

When you do a search request in the search bar. It returns a querystring which looks like '?q=querystring', it automatically links this querystring to my search page.

Question
How can I take the querystring from the address bar and use it to fill in the Google Custom Search bar.

Solution

You did not specify what you were using, so I will make the assumption that you want the easiest way out:

If you are using the new Element API v2, then you have two options to handle 2-page search:

Full Render

Index.html

<!-- GOOGLE SEARCH JS Search Only Implementation-->
<div>
    <script>
      (function() {
        var cx = 'YOUR_API_KEY';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
      })();
    </script>
    <gcse:searchbox-only resultsUrl="search.html"></gcse:searchbox-only>
</div>

search.html

<!-- GOOGLE SEARCH JS Implementation-->
<div>
<script>
(function() {
    //Same code from Index.html
</script>
<gcse:search></gcse:search>
</div>

Custom Index + Search Page Render

You create your own search form at the Index page where it sends a HTTP GET with a parameter that you will hook on the queryParameterName. This will be specified in the gsce element being rendered. An example URL would be http://localhost:3939/search?search_term=Miku

Index.html

        <form method="get" action="search.html" name="searchform" id="searchform">
            <label for="words">Search:</label>
            <input name="search_term" alt="Search_term" value="" size="16" id="words" type="text" accesskey="s">
            <button type="submit" value="Submit" accesskey="g">Search</button>
        </form>

Search.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<script>
(function() {
  var cx = 'YOUR CSE KEY';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search queryParameterName="search_term"></gcse:search>
</div>
</body>
</html>

From my experience dealing with the element API v2, this is one of the few exposed hooks in which you can customize on the client side. Also, you should render your own code at the CSE Page, then add the queryParameterName.