Javascript enter key opening page in a new tab
Question
I am working with a search box and I have tried multiple fixes all of which reflect in the code. When you click the search button the search bar works and takes you to the search page however if you press the enter key it just pulls a refreshed version of the current page into a new tab. Does anybody know a way to fix this?
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body></body>
<div class="body"></div>
<div class="grad"></div>
<div class="header">
<div>Abuse<span>Caboose</span></div>
</div>
<br />
<br />
<br />
<br />
<a href="login.html">Login</a>
<br />
<br />
<a href="Media_Page.html">Media</a>
<br />
<br />
<a href="Bios.html">Our Team List </a>
<br />
<br />
<a href="ContactUs.html">Contact Us! </a>
<br />
<br />
<img src="http://res.cloudinary.com/lmn/image/upload/e_sharpen:150,f_auto,fl_lossy,q_80/v1/gameskinny/5edfe8862832766bd1c9a38e6a9821eb.jpg" alt="I am Support" title="Image" width="400" height="200" />
<br />
<br />
<br />
<br />
<div id="tfheader">
<form target="_blank">
<div><input type="text" placeholder="Search Google" onchange="urlinput(event)" onkeypress="return searchit()"></div>
<br />
<a id="searchbutton" href="" onclick="searchit()" target="_blank" onkeypress="return searchit()">Search</a>
</form>
</div>
<script>
const baseUrl = "https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=";
var userurl;
var enterurl;
function urlinput(event){
var text = event.target.value;
text = text.replace(" ", "+");
userurl = text;
var searchButton = document.getElementById('searchbutton').href="baseUrl";
}
function searchit()
{
document.getElementById("searchbutton").href= baseUrl + userurl;
}
</script>
</html>
3 answers
solution1
1 ACCPTED 2017-01-27 15:22:23
Your textbox is inside a form and is submitting the form by default when you hit enter. Override the form's default submit behavior by handling the onsubmit function. If you return false from this function, the form will not submit.
<form target="_blank" onsubmit='return handleSubmit();'>
<div><input type="text" placeholder="Search Google" onchange="urlinput(event)" onkeypress="return searchit()"></div>
<br />
<a id="searchbutton" href="" onclick="searchit()" target="_blank" onkeypress="return searchit()">Search</a>
</form>
<script>
function handleSubmit() {
return false;
}
</script>
solution2
0 2017-01-27 16:14:48
It is a simple fix. Just remove the form tag, you don't need it as you have java script to handle search. This will fix the issue.
solution3
0 2017-01-27 16:43:24
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body></body>
<div class="body"></div>
<div class="grad"></div>
<div class="header">
<div>Abuse<span>Caboose</span></div>
</div>
<br />
<br />
<br />
<br />
<a href="login.html">Login</a>
<br />
<br />
<a href="Media_Page.html">Media</a>
<br />
<br />
<a href="Bios.html">Our Team List </a>
<br />
<br />
<a href="ContactUs.html">Contact Us! </a>
<br />
<br />
<img src="http://res.cloudinary.com/lmn/image/upload/e_sharpen:150,f_auto,fl_lossy,q_80/v1/gameskinny/5edfe8862832766bd1c9a38e6a9821eb.jpg" alt="I am Support" title="Image" width="400" height="200" />
<br />
<br />
<br />
<br />
<div id="tfheader">
<form>
<div><input type="text" placeholder="Search Google" onchange="urlinput(event)" onkeydown="newSearchit();"></div>
<br />
<a id="searchbutton" href="" onclick="searchit()" onkeypress="return searchit()">Search</a>
</form>
</div>
<script>
const baseUrl = "https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=";
var userurl;
var enterurl;
function urlinput(event){
var text = event.target.value;
text = text.replace(" ", "+");
userurl = text;
var searchButton = document.getElementById('searchbutton').href="baseUrl";
}
function searchit()
{
//alert('Inhere');
document.getElementById("searchbutton").href= baseUrl + userurl;
}
function newSearchit()
{
if(event.keyCode == 13) {
document.getElementById("searchbutton").click();
}
}
</script>
</html>
Try this out!!!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.