Get from twitter boostrap to Google custom search

Question

I am trying to make a post to the Google Custom Search URL GET https://www.googleapis.com/customsearch/v1?key=INSERT_YOUR_API_KEY&cx=017576662512468239146:omuauf_lfve&q=lectures

from my Twitter Boostrap (V3) enabled UI. Here is the code

 <form class="navbar-form navbar-left" role="search" method="get" action="https://www.googleapis.com/customsearch/v1?key=xxxx&cx=xxx:xxx">
            <div class="form-group">
                <input type="text" id='q' class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>

However I get the following error

{
  "error": {
  "errors": [
              {
                "domain": "global",
                "reason": "required",
                "message": "Required parameter: q",
                "locationType": "parameter",
                "location": "q"
         }
           ],
                "code": 400,
                "message": "Required parameter: q"
         }
       }

Answer 1

You need to add onsubmit event handler to form and make URL request to google search with adding the query parameter to it, something like following

Your form-

 <form class="navbar-form navbar-left" role="search" onsumit='submitMyForm'>

and in script tag (assuming you are using jquery)

<scirpt>
function submitMyForm(){

  // get query parameter
 query= $('#q').val()
 // form request URL
 reqUrl = 'https://www.googleapis.com/customsearch/v1?key=xxxx&cx=xxx:xxx&q='+query

// make ajax get request 
$.get(
    reqUrl,
    function(data) { 
    // data contains the search results
 },
);

}
</scirpt>
`