0

How would i create a search box in my website that when i search for something it takes me to google. here is my code: - it doesnt work when i click the search button.

<div class="searchBox" >

<form action="https://www.google.co.uk/" method="get" >
<input type="text" name="Search" placeholder="Search Here..." size="20" />
<input type="button" value="Search" />
</form>

</div>
jeremyo
  • 43
  • 7

5 Answers5

1

Since you are just redirecting the user, you don't need to use the form action. Just redirect the user with javascript on button click to the link you want.

HTML:

<div class="searchBox" >
  <input type="text" name="Search" placeholder="Search Here..." size="20" />
  <button id="someButton">Search</button>
</div>

Now get the value of input and passes this as a query into google's url.

JS:

$('#someButton').click(function() {
    var value = $( 'input' ).val();
    window.location.href = 'http://www.google.com/search?q='+value;
});
gazelle
  • 135
  • 6
  • If you just said that he needs to rename the text input from "Search" to "q", and action from "google.com.uk" to "google.com", would be the same. But I got the idea. – Tengiz Dec 17 '15 at 22:08
  • That's good to know. Much simpler. – gazelle Dec 17 '15 at 22:12
1

You need a submit button (type="submit"), not a regular button (which is just for hanging JavaScript from).

You need to set the action to the correct URL (which is https://www.google.com/search).

You need to give your text input the correct name (which is q).

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
1

You need to have your action directed to the url google actually does the search at. That's google.co.uk/search.

Your input field's name will be the query param, and google expects this to be q. So your form should look like this:

 <div class="searchBox" >
  <form action="https://www.google.co.uk/search" method="get" >
    <input type="text" name="q" placeholder="Search Here..." size="20" />
    <input type="submit" value="Search" />
  </form>
</div>
baao
  • 62,535
  • 14
  • 113
  • 168
1

Set the button type to submit, the name of the input field to q, and the target of the form to the correct base page /search so it actually fills all the right fields:

<form action="https://www.google.co.uk/search" method="get" >
  <input type="text" name="q" placeholder="Search Here..." size="20">
  <input type="submit" value="Search">
</form>

Note that a sample here won't work as Google forbids frame access. Also I removed the /> endings from the input fields as that is deprecated in HTML5 for 'empty' elements.

Community
  • 1
  • 1
Niels Keurentjes
  • 38,099
  • 7
  • 85
  • 126
0

If your specifically trying to use Google there is a handy generator Google developed to make this easy.

Try https://cse.google.com/cse/

Jesse Elser
  • 964
  • 1
  • 9
  • 32