How can I make the page do nothing when user does not input anything in the search box?
When it does not have anything in the search box, I want the page to remain the same.
How can I do this?
This is my current code:
<html>
<head>
<title>
Brandon's Search Engine
</title>
</head>
<script type="text/javascript">
//document.getElementById("suggestion")
function getSuggestion(q) {
var ajax;
if(window.XMLHttpRequest)//for ie7+, FF, Chrome
ajax = new XMLHttpRequest();//ajax object
else
ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
ajax.onreadystatechange = function() {
if(ajax.status === 200 && ajax.readyState === 4) {
//if result are not there then don't display them
if(ajax.responseText === "")
document.getElementById("suggestion").style.visibility = "hidden";
else {
document.getElementById("suggestion").style.visibility = "visible";
document.getElementById("suggestion").innerHTML = ajax.responseText;
}
}
};
ajax.open("GET", "suggestion.php?q=" + q, false);
ajax.send();
}
</script>
<body>
<form method="GET" action="search.php" name="q">
<table align="center">
<tr>
<td>
<h1><center>Brandon's Search Engine</center></h1>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>
<div id="suggestion" style="width: 648px">
</div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" value="Clear" style="height: auto; width: 50px; padding: 2px" />
</td>
</tr>
<tr>
<td align="center">
To insert your site in result fill in the form at <a href="insert.php">here</a>.
</td>
</tr>
</table>
<input type="hidden" name="page" value="0" />
</form>
</body>
</html>
You should validate your form, like:
<form method="GET" action="search.php" name="q" onsubmit="return validateForm()">
Your function will be:
function validateForm() {
if(document.getElementById('q').value=='') return false;
return true;
}