3

For my sample Google Chrome extension, I have a textbox and a link:

<input id="textbox" type="text" value="" size="25" />
<a class="button" href="http://www.google.com"><span>Search</span></a>

When the user clicks on the link, I want the browser to actually go to:

http://www.google.com/search?q=<whatever was in textbox>

How can I do this?

Lazer
  • 90,700
  • 113
  • 281
  • 364

4 Answers4

3

I strongly advice you to use an ordinary form with a submit button for this. In that case, you even don't have to use JavaScript at all. For example:

<form action="http://www.google.com/search">
    <input id="textbox" name="q" type="text" value="" size="25" />
    <input type="submit" value="Search" />
</form>

If you really want to use the provided markup, best thing you can do is to add an ID to the a element, e.g. searchButton, and then do:

document.getElementById("searchButton").onclick = doSearch;

function doSearch() {
    var v = document.getElementById("textbox").value;
    window.location = "http://www.google.com/search?q=" + encodeURIComponent(v);
    return false; // not entirely necessary, but just in case
}
Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
  • That would work if the user was submitting a form, but he's not. The user actually clicks on an anchor tag. – BryanH May 31 '11 at 19:47
  • @Bryan: You're right, though it's a bad design pattern. The OP should use a button for this. I will change my answer. – Marcel Korpel May 31 '11 at 19:53
  • 1
    @Marcel - I agree it is poor design because any robot crawling the site will follow the link (they don't follow forms, usually), it isn't 503c, will fail usability if CSS is turned off, *and* isn't what anchors are for. ;) – BryanH May 31 '11 at 19:56
  • @Marcel: Strange thing - as soon as I add an id to the anchor, the CSS setting `a.button` do not apply anymore. Is this expected? Any known workarounds? – Lazer May 31 '11 at 20:18
  • @Marcel: Nevermind, I accidentally removed the href part while trying something, and I thought it was because I added the id part. – Lazer May 31 '11 at 21:01
1

UPDATED SOLUTION:

Here's an example with inline javascript that sets the href of the link appropriately and then lets normal processing handle the redirect (added encodeURIComponent base on Marcel's comment).

<input id="textbox" type="text" value="" size="25" />
<a class="button" id="googleLink" href="willBeChanged" 
 onclick="this.href='http://www.google.com/search?q=' + encodeURIComponent(document.getElementById('textbox').value);">
  <span>Search</span>
</a>
Briguy37
  • 8,342
  • 3
  • 33
  • 53
  • Use `encodeURIComponent` to properly encode query parameters. Moreover, it's a bad design pattern to put (lots of) code in your markup. – Marcel Korpel May 31 '11 at 20:03
  • @Marcel Korpel Thanks for the suggestions. Also, thanks @BryanH for adding the code. I've updated it to have encodeURIComponent as well. As far as not having too much inline JavaScript, I agree, but originally Lazer said he was making an extension, so I thought he might like it self-contained in the HTML. – Briguy37 May 31 '11 at 20:24
0

Use JQuery to make your life easy.

Your JQuery would look like this:

$("#linky").attr('href',"http://www.google.com/search?q="+$("#textbox").val());

Your HTML would look like this:

<input id="textbox" type="text" value="" size="25"></input>
<a class="button" href="www.google.com" id="linky"><span>Search</span></a>
Jesse E. Stark
  • 98
  • 4
  • So if someone types "foo" in the box, the value of the link would be `foo`, not `http://www.google.com/search?q=foo` – BryanH May 31 '11 at 19:38
  • Bryan, how so? But my answer was sloppy because it needs to be tied to an action... Basically you need to tie in my jquery code into a function that runs when the textbox is changed. `$("#textbox").change( function() { // OLD CODE HERE });` – Jesse E. Stark May 31 '11 at 21:30
  • Please don't use jQuery solutions when the question isn't marked jQuery. – Kevin Ji Jun 01 '11 at 00:16
0

Using jquery:

   <script type="text/javascript">
    $(document).ready(function(){   
   $("#textbox").keyup(function () {
  var searchstring = $(this).val();
  searchstring = encodeURIComponent(searchstring);

  $('#searchlink').attr('href', 'http://www.google.com/search?q=' + searchstring);
  });

   });

HTML markup:

   <input id="textbox" type="text"  size="25">
   <a class="button" href="http://www.google.com" id='searchlink'>Search</a>
AR.
  • 1,935
  • 1
  • 11
  • 14