My function is not working

Question

Upon clicking the search button, the function is suppose to attach the search input to the Google URL. However, it seems as though the function neglects the variable because it redirects to Google's homepage although something was typed in the search bar.

document.getElementById('searchbtn').onclick = searchExplore;
function searchExplore () {
 var input = document.getElementById('searchbar').value;   
 document.getElementById('searchform').action = 'http://www.google.com/search?q='+input;
}

body{
}
.search{
  text-align:center;
  background: url("http://dash.ga.co/assets/anna-bg.png");
  background-size:cover;
  background-position: center;
  padding:20px;
  }
form{
  display:inline-flex;
}
#searchbar{
  font-size:35px;
  border: 0;
  padding: 0px 0 0 20px;
  border-radius:20px 0 0 20px;
  outline: 0;
  font-family: 'Bitter', serif;
  }
#searchbtn{
  font-size:35px;
  border: 0;
  padding: 10px;
  border-radius: 0 20px 20px 0;
  outline: 0;
  width: 90px; 
  cursor: pointer;
}

#searchbar:hover,#searchbar:focus{
  box-shadow:-3px 3px 15px;
}
#searchbtn:hover,#searchbtn:focus{
  box-shadow:-.1px 3px 15px 1px;
}

<!DOCTYPE html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <link rel="stylesheet" href="mypen1.css" type="text/css"/>
  <title>MJ Search</title>
  
</head>
<body>
  <div class="search">
    <form id="searchform" action="">
         <input id="searchbar" type= "search" placeholder="Search & Explore..."/>
         <button id="searchbtn"><i class="fa fa-search"></i></button>
    </form>
  </div>
  <script type="text/javascript" src="mypen1.js"></script> 
</body>

Just by doing your way I think that first you need to `preventDefault()` (the initial submit), then attach `action` url, then manually `submit` — sTx, Dec 18 '17 at 08:04
but anyways you need a way to view that query result somewhere; how you do that? — sTx, Dec 18 '17 at 08:05

Arampg · Answer 1 · 2017-12-18T08:14:20.573

0

HTML file:

<form id="searchform" action="" method="get" onsubmit="return searchExplore()">
     <input id="searchbar" type= "search" placeholder="Search & Explore..."/>
     <input type="submit" />
</form>

JS File:

function searchExplore () {
    var input = document.getElementById('searchbar').value;
    window.location = 'http://www.google.com/search?q='+input;
    return false;
}

Hope this helps

edited Dec 18 '17 at 08:14

answered Dec 18 '17 at 07:56

Arampg

107
6

Why is false returned, just curious? – Dec 18 '17 at 17:25
https://stackoverflow.com/questions/855360/when-and-why-to-return-false-in-javascript Was my earlier answer useful? Create an html file with this little code, and check whether it is the expected behaviour. – Arampg Dec 19 '17 at 16:01
Why is false returned? – Dec 19 '17 at 17:23
You didn't bother to click on the [link](https://stackoverflow.com/questions/855360/when-and-why-to-return-false-in-javascript) above, did you? – Arampg Dec 20 '17 at 09:56
I did, but check out my last comment on the 2nd post. – Dec 20 '17 at 17:22

score 0 · Answer 2 · answered Dec 18 '17 at 08:16

0

If you must use form, then you need to call event.preventDefault() as first statement in the function, (also you need to modify function definition to -->searchExplore(event))

Otherwise, remove the form from html, and simply use document.location = 'http://www.google.com/search?q='+input; inside the searchExplore function, and you need not use event.preventDefault() as well

answered Dec 18 '17 at 08:16

Akshay Vijay Jain

13,461
8
60
73

What exactly does event.preventDefault( ) do in this situation? – Dec 18 '17 at 17:28
I tried your method. It doesn’t search at all now. I still what the search button to work, but, for example if I search “cat”, I want it to go to the link “http://www.google.com/search?q=cat” instead of “http://www.google.com/search?q=“. – Dec 18 '17 at 20:18
If you are still facing the issue, please ping me – Akshay Vijay Jain Dec 22 '17 at 08:22
what's the issue ping can you share – Akshay Vijay Jain Dec 22 '17 at 08:31
my skypeId : learnakshayjain, you can share screen if you wish – Akshay Vijay Jain Dec 22 '17 at 08:31
it wont take more than 5 minutes, if you have hangout we can connect there as well, my gmail is theakshay.jain@gmail.com – Akshay Vijay Jain Dec 22 '17 at 08:34

My function is not working

2 Answers2