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"
         }
       }

Please state a question. Also note that the action in your code has no query parameter - so it is not surprising that you get that error msg. — Tom
– Tom, Commented Apr 2, 2014 at 20:06

ajduke · Accepted Answer · 2014-04-06 09:51:01Z

0

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>
`

answered Apr 6, 2014 at 9:51

ajduke

5,0778 gold badges40 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get from twitter boostrap to Google custom search

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related