Search Bar problem

JavaScript
1

I have this html:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<style type="text/css">
	#tfheader{
		background-color:#c3dfef;
	}
	#tfnewsearch{
		float:right;
		padding:20px;
	}
	.tftextinput2{
		margin: 0;
		padding: 5px 15px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#666;
		border:1px solid #0076a3; border-right:0px;
		border-top-left-radius: 5px 5px;
		border-bottom-left-radius: 5px 5px;
	}
	.tfbutton2 {
		margin: 0;
		padding: 5px 7px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		font-weight:bold;
		outline: none;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		color: #ffffff;
		border: solid 1px #0076a3; border-right:0px;
		background: #0095cd;
		background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
		background: -moz-linear-gradient(top,  #00adee,  #0078a5);
		border-top-right-radius: 5px 5px;
		border-bottom-right-radius: 5px 5px;
	}
	.tfbutton2:hover {
		text-decoration: none;
		background: #007ead;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	}
	.tfbutton2::-moz-focus-inner {
	  border: 0;
	}
	.tfclear{
		clear:both;
	}
</style>
</head>
<body>
	<!-- HTML for SEARCH BAR -->
	<div id="tfheader">
		<form id="tfnewsearch" method="get" action="https://spyse.com/target/domain/">
		        <input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" value="Search our website"><input type="submit" value=">" class="tfbutton2">
		</form>
		<div class="tfclear"></div>
	</div>
</body>
</html>

And this JS:

<script type="text/javascript">
window.onload = function(){ 
	var submitbutton = document.getElementById("tfq");
	if(submitbutton.addEventListener){
		submitbutton.addEventListener("click", function() {
			if (submitbutton.value == 'Search our website'){
				submitbutton.value = '';
			}
		});
	}
}
</script>

When I search for sapo.pt on my website the result is https://spyse.com/target/domain?q=sapo.pt, and my objective is to get https://spyse.com/target/domain/sapo.pt, how can I take of the ?q= and put /sapo.pt?

2

Hi @diogo_mvnm, if this is really supposed to be a form then a server redirect would be more appropriate IMHO; if you’re not going to submit anything anyway though you might as well just use a link, and change its href dynamically based on the input value like e.g.:

HTML

<input type="text" id="search" placeholder="Search our website">
<a id="link" href="https://spyse.com/target/domain/">Go</a>

JS

var search = document.getElementById('search')
var link = document.getElementById('link')
var baseHref = link.href

search.addEventListener('input', function () {
  link.href = baseHref + search.value
})
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.