html javascript search not working

Question

This is the code :

<style>
.copyrighttoolbox {
  font-size:9px
}
</style>
<script>
function searchFor(searchEngine,searchQuery){
  for (var i = 0; i < searchEngine.length; i++) {
    if (searchEngine[i].type === 'radio' && searchEngine[i].checked) {
      value = searchEngine[i].value;   
    }
  }
  if (value=="google"){
    var x="http://google.com.hk/search?q="+searchQuery;
    window.location.href=x
  }
  if (value=="yahoo"){
    var x="http://hk.search.yahoo.com/search?p="+searchQuery;
    window.location.href=x
  }
  if (value=="bing"){
    var x="http://bing.com/search?q="+searchQuery;
    window.location.href=x
  }
  if (value=="wikipedia"){
    var x="http://en.wikipedia.org/w/index.php?search="+searchQuery;
    window.location.href=x
  }
}
</script>
<form style="border:3px #cccccc dashed;width:400px">
  <select name="searchLoc">
    <option value="google">Google</option>
    <option value="yahoo">Yahoo</option>
    <option value="bing">Bing</option>
    <option value="wikipedia">Wikipedia</option>
  </select>
  <input type="text" name="searchContent">
  <input type="submit" onclick="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search"><span class="copyrighttoolbox">&nbsp;&nbsp;&nbsp;&nbsp;by tool-box.weebly.com</p>
</form>

This is not working and the link after submit became:

http://tool-box.weebly.com/web-tool.html?searchLoc=google&searchContent=search

How can I solve this problem?
Any help will be appreciated.

What is it that you want to achieve?

Siyah
– Siyah

2014-03-01 09:00:14 +00:00
Commented Mar 1, 2014 at 9:00 — Siyah
– Siyah, Commented Mar 1, 2014 at 9:00

KoalaBear · Accepted Answer · 2014-03-01 09:06:16Z

1

Try this. It looks like you are mixing up some things as the right value is already in the searchEngine variable.

function searchFor(searchEngine,searchQuery){
  if (searchEngine=="google"){
    var x="http://google.com.hk/search?q="+searchQuery;
    window.location.href=x
  }
  if (searchEngine=="yahoo"){
    var x="http://hk.search.yahoo.com/search?p="+searchQuery;
    window.location.href=x
  }
  if (searchEngine=="bing"){
    var x="http://bing.com/search?q="+searchQuery;
    window.location.href=x
  }
  if (searchEngine=="wikipedia"){
    var x="http://en.wikipedia.org/w/index.php?search="+searchQuery;
    window.location.href=x
  }
}

answered Mar 1, 2014 at 9:06

KoalaBear

3,0383 gold badges29 silver badges30 bronze badges

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

Comments

abc123 · Accepted Answer · 2014-03-01 09:12:25Z

1

Demo: plunker

Description:

You were cycling through searchEngine instead of just using the value you are passing from the onclick of the submit button.
I also changed this to a switch instead of multiple if statements because of the nature of this use case.
Next i closed all your javascript lines with ; since there were some that were missing it.
Finally I declared the var x at the top of the function so you don't get duplicate variable declaration warnings.

JS

function searchFor(searchEngine,searchQuery){
  var x = "";

  switch(searchEngine)
  {
   case "google":
    x="http://google.com.hk/search?q="+searchQuery;
    alert(x);
    window.location.href=x;
    break;
  case "yahoo":
    x="http://hk.search.yahoo.com/search?p="+searchQuery;
    window.location.href=x;
    break;
  case "bing":
    x="http://bing.com/search?q="+searchQuery;
    window.location.href=x;
    break;
  case "wikipedia":
    x="http://en.wikipedia.org/w/index.php?search="+searchQuery;
    window.location.href=x;
    break;
  }
}

HTML:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <form style="border:3px #cccccc dashed;width:400px">
      <select name="searchLoc">
        <option value="google">Google</option>
        <option value="yahoo">Yahoo</option>
        <option value="bing">Bing</option>
        <option value="wikipedia">Wikipedia</option>
      </select>
      <input type="text" name="searchContent">
      <input type="submit" onclick="javascript:searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search"><span class="copyrighttoolbox">&nbsp;&nbsp;&nbsp;&nbsp;by tool-box.weebly.com</p>
    </form>
  </body>

</html>

CSS:

.copyrighttoolbox {
    font-size:9px
}

answered Mar 1, 2014 at 9:12

abc123

19k7 gold badges55 silver badges84 bronze badges

2 Comments

Jamie Over a year ago

what's this? <script src="script.js"></script>

abc123 Over a year ago

@Jamie plunker separates the js, html, and css so you don't have it all in the html that's why it is including it. If you open the plunker you'll see that. You can just put it all back in one file if you prefer but separating it allows other items to use this same js.

Collectives™ on Stack Overflow

html javascript search not working

2 Answers 2

Comments

Demo: plunker

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related